Add an object with setState() to an array of objects

Question

My component's state is an array of objects:

this.state = {
  userFavorites: [{id: 1, title: 'A'}, {id: 2, title: 'B'}]
}

I need to, everytime I click in a button, update my state with another object like the ones I have in my state above; for example: {id: 3, title: 'C'}.

If I simply concat them and set the state, the last object keeps being changed by the one that's being added.

Do I need the spread operator here?

Since you're pushing object, you can use spread operator while concatenating. Please don't use push. — vijay krishna, Oct 23 '18 at 17:44
newList = [...this.state.user favourites, { id:3, title: 'C' }] — Henok Tesfaye, Oct 23 '18 at 17:51
@brk [this post](https://stackoverflow.com/questions/48369357/reactjs-why-is-pushing-value-into-this-state-array-causing-type-error) might help you — vrintle, Oct 23 '18 at 17:54
How did you “simply concat them and set the state”? That sounds right. — Ry-, Oct 23 '18 at 17:59

Hemadri Dasari · Answer 1 · 2018-10-23T18:27:08.443

6

You should do it this way. Below is the most recommended way to push values or objects to an array in react

 this.setState( prevState => ({
     userFavorites: [...prevState.userFavourites,  {id: 3, title: 'C'}]
 }));

To push to the beginning of the array do it this way

   this.setState( prevState => ({
     userFavorites: [{id: 3, title: 'C'}, ...prevState.userFavourites]
  }));

edited Oct 23 '18 at 18:27

answered Oct 23 '18 at 18:23

Hemadri Dasari

32,666
37
119
162

1

reverse the order--the OP wants the new object added to the _beginning_ of the array, not the end – Ted Oct 23 '18 at 18:25

Justin Joseph · Answer 2 · 2021-10-27T08:21:14.833

4

for functional component

const [userFavorites, setUserFavorites] = useState([]);

setUserFavorites((prev) => [...prev, {id: 3, title: 'C'}])

edited Oct 27 '21 at 08:21

answered Oct 25 '21 at 16:22

Justin Joseph

3,001
1
12
16

score 2 · Answer 3 · answered Oct 23 '18 at 18:32

2

There are multiple ways to do this. The simplest way for what you are needing to do is to use the spread operator. Note that item is the object being added to userFavorites.

this.setState({
  userFavorites: [ ...this.state.userFavorites, item ],
});

Note: If at some point down the line you are needing to update a specific item in the array, you could use the update function from the immutability-helpers library. https://reactjs.org/docs/update.html

answered Oct 23 '18 at 18:32

Ross Sheppard

850
1
6
14

1

Thank you. This response was immensely helpful. I have been pulling my hair out with the .map() is not a function error. I was obviously pushing incorrectly to the array of objects in state, and which was having a domino effect on the rest of my app. The spread operator was the key. Thank you! – Cheryl Velez Apr 20 '20 at 13:55

score 1 · Answer 4 · answered Oct 23 '18 at 17:52

1

const userFavorites = [...this.state.userFavorites, {id: 3, title: 'C'}]
this.setState({ userFavorites })

answered Oct 23 '18 at 17:52

Alfred Ayi-bonte

715
7
11

It keeps being changed by the one that's being added. Not sure if there's some kind of issue with my implementation but this is getting weird. – Rafael Guedes Oct 23 '18 at 18:05

Add an object with setState() to an array of objects

4 Answers4

Linked