Change a value in a nested object using useState in reactJs

Question

I'm trying to change the value of an object property nested in an array nested inside an object using useState.

State is set as follows:

  const [groupState, setGroupState] = useState({
    groupId: uuidv4(),
    content: [{ rowId: uuidv4(), field: '', from: '', to: '' }],
  });

I'm trying to change the value of the 'field' property. If I add an entire 'dummy' object with the required value in the required property then it works:

setGroupState({
  ...groupState,
  content: groupState.content.map((item) => {
    if (item.rowId === rowId) {
      return (item = { rowId: uuidv4(), field: value, from: '', to: '' });
    }
  }),
});

However, I need to just update the specific property value, not the whole object. My latest effort is the following:

setGroupState({
  ...groupState,
  content: groupState.content.map((item) => {
    if (item.rowId === rowId) {
      return (item.field = value);
    }
  }),
});

Which returns the error: "Cannot create property 'field' on string 'user'" - I'm doing somethign wrong but I can't work out what.

Dennis Vash · Accepted Answer · 2020-11-17 13:15:40Z

1

Try destructing your item object:

setGroupState({
  ...groupState,
  content: groupState.content.map((item) => ({
    ...item,
    field: item.rowId === rowId ? value : item.field,
  })),
});

// Without explicit return
setGroupState({
  ...groupState,
  content: groupState.content.map((item) => {
    return { ...item, field: item.rowId === rowId ? value : item.field };
  }),
});

edited Nov 17, 2020 at 13:15

answered Nov 17, 2020 at 12:39

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

3 Comments

Stef Over a year ago

Close but no cigar, it works but when you add another row, the field values in previous rows disappear

Stef Over a year ago

Need to find a way of knocking out the else value in the ternary but again, a whole series of errors. %&&%$£! :-)

Dennis Vash Over a year ago

No one can guesses how your app works, we answer your specific questions with the information we have.

Stef · Accepted Answer · 2020-11-17 13:13:20Z

0

Okay, got it, thanks Dennis Vash - just needed a little change:

setGroupState({
  ...groupState,
  content: groupState.content.map((item) => ({
    ...item,
    field: item.rowId === rowId ? value : item.field,
  })),

answered Nov 17, 2020 at 13:13

Stef

3691 gold badge5 silver badges24 bronze badges

Collectives™ on Stack Overflow

Change a value in a nested object using useState in reactJs

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related