How to change setState of object in other object in React?

Question

I've created a state of objects in React, but I need to increase an other object into the same state. However, i can't use the setState() property because its causes a re-render (infinite loop).

My state:

const [testObject, setTestObject] = useState({
       id: 0,          
       telephone: 123,            
       personalData: {
            name: '',
            alias: '',
            gender: ''
        }
    })

The error:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

I tried to find a solution for it, but i can't solve it:

setTestObject({...testObject, personalData: {
        ...testObject, name: 'McDonnell DC-10'
    }})

Where am i wrong?

score 0 · Answer 1 · answered Jul 03 '22 at 20:34

0

You just need to specify you're using personalData, you're along the right lines.

setTestObject({...testObject, personalData: {
        ...testObject.personalData, name: 'McDonnell DC-10'
    }})

You can even use the old state as a parameter for better performance.

setTestObject(testObject => { return {...testObject, personalData: {
        ...testObject.personalData, name: 'McDonnell DC-10'
    }}})

answered Jul 03 '22 at 20:34

Daniel M

133
3
9

I tried using this, but have the same problem yet. But, thanks! – Lucas Souza Jul 03 '22 at 21:14

score 0 · Answer 2 · answered Jul 03 '22 at 20:39

What you can do to avoid the infinite loop is add the code inside a useEffect(), like this:

 useEffect(() => {
    setTestObject({
      ...testObject,
      personalData: {
        ...testObject.personalData,
        name: 'McDonnell DC-10',
      },
    });
  }, []);

Also I guess you want to update the property name and no to add the whole object again inside personalData, that is why you need to use ...testObject.personalData

How to change setState of object in other object in React?

2 Answers2