React setState to array element

Question

I want to update list with React.

List I have:

export const arrList = [
  { title: '', elements: []  },
  { title: 'a', elements: ['aaa',  ]  },
  { title: 'b', elements: ['bbb',  ]  },
];

const [poreikiai, setPoreikiai] = useState(arrList);

And now, I want to append to first array element: elements { title: '', elements: [] }

I something like this:

{ title: '', elements: ["firstElement"] }

how can I do it?

I understant that I need to use setPoreikiai but I cant figure out sintax;

Something like:

    setPoreikiai(prevState => { 
      return {...prevState, ...newValue};
    });```

lawrence-witt · Accepted Answer · 2021-01-26 16:49:24Z

1

Deeply clone your way into the data structure and add the new item at the end:

setPoreikiai(prevState => {
  const prevClone = [...prevState];
  
  prevClone[0] = {
    ...prevClone[0],
    elements: [...prevClone[0].elements, "secondItem"]
  };
  
  return prevClone;
});

It's important that you create copies all the way down to the desired level of state so that you do not accidently mutate any values by reference. Any directly mutated data can become out of sync with other effects and memoised components which might accept them as dependencies.

edited Jan 26, 2021 at 16:49

answered Jan 26, 2021 at 16:43

lawrence-witt

9,5023 gold badges18 silver badges37 bronze badges

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

Collectives™ on Stack Overflow

React setState to array element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related