useState to update array of objects nested inside object

Question

I have state set as follows:

  const [groupState, setGroupState] = useState({
    groupId: uuidv4(),
    content: [],
  });

I want to push an object to the 'content' array but am having difficulty. I looked at this answer: How do I update states onchange in an array of object in React Hooks but can't seem to apply it to the problem.

Currently I have:

setGroupState({
  ...groupState,
  ...content.push({test: 'test'})
});

.. but it's not working and I'm getting nowhere.

Can anyone tell me how to get this sorted?

thedude · Accepted Answer · 2020-11-17 09:15:23Z

3

push mutates the array, you should create a new array like so:

setGroupState({
  ...groupState,
  content: [...groupState.content, {test: 'test'}],
});

answered Nov 17, 2020 at 9:15

thedude

9,8371 gold badge34 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thanks - worked like a treat. Don't know who put the mark down there or what it was for - perfectly reasonable question. 'Research effort' is stated.