CODEWITHSUNDEEP
javascriptreactjssetstate
Rafael Guedes
Rafael Guedes

Reputation: 339

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

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?

Upvotes: 5

Views: 15379

Answers (4)

Justin Joseph
Justin Joseph

Reputation: 3889

for functional component

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

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

Upvotes: 4

Ross Sheppard
Ross Sheppard

Reputation: 870

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

Upvotes: 2

Hemadri Dasari
Hemadri Dasari

Reputation: 33974

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

Upvotes: 6

Alfred Ayi-bonte
Alfred Ayi-bonte

Reputation: 775

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

Upvotes: 1

Related Questions