React dynamic object creation

Question

I was trying to generate an object dynamically from forms. I ran into a problem when the next time a "Layout" component is added, it copies the properties of another "Layout". I can't figure out what could be the problem.

Link to CodeSandbox: https://codesandbox.io/s/goofy-sky-3jhndf

I am sure that the solution to this problem can be simple. I will be glad for any help. Thanks a lot.

EDIT: If you add the first Layout and as a child element of the Calculator example, then the next time you add the Layout will also be with the Calculatorchild element

Answer 1

You tried to copy your Component

const obj = Object.assign({ id: uuid() }, Component);
addElement(setElements, obj);

so when you edit your component, primitive data of Component also changed. So you need to deep-clone your component to avoid object mutation

const obj = Object.assign({ id: uuid() }, JSON.parse(JSON.stringify(Component)));
addElement(setElements, obj);

You can see in codesandbox