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?

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?

• javascript
• reactjs
• setstate

• Why cant you simply use push? – brk Commented Oct 23, 2018 at 17:42
• Since you're pushing object, you can use spread operator while concatenating. Please don't use push. – vijay krishna Commented Oct 23, 2018 at 17:44
• @vijaykrishna why push cannot be used? – brk Commented Oct 23, 2018 at 17:47
• newList = [...this.state.user favourites, { id:3, title: 'C' }] – Henok Tesfaye Commented Oct 23, 2018 at 17:51
• @brk this post might help you – vrintle Commented Oct 23, 2018 at 17:54

4 Answers 4

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]
  }));

for functional component

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

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

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

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