using the spread operator in react setState on array of objects

Question

I have an array of objects (language codes and names) that I am trying to spread into another array in local state in a react component. The structure of the array I am trying to spread is like this:

let langs = [
  {code: "af", name: "Afrikaans"},
  {code: "sq", name: "Albanian"}
]

I am trying something simply like this:

this.setState({
  languages: [...langs]
}, 
  console.log(this.state.languages);
);

When I try to console.log languages in the callback from setState the array is empty. What am doing wrong here?

setState is an async action. Use the console.log() in the setState callback, or in render(); — Ori Drori
– Ori Drori, Commented Apr 24, 2018 at 7:18

Stan Luo · Accepted Answer · 2018-04-24 07:21:22Z

3

setState is async, and you need to invoke the function in the callback.

this.setState({
  languages: [...langs]
}, () => console.log(this.state.languages)
);

answered Apr 24, 2018 at 7:21

Stan Luo

3,9196 gold badges44 silver badges70 bronze badges

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

1 Comment

cbutler Over a year ago

Ahhhhh I feel so stupid now, thanks Stanley and Jamiec!

Jamiec · Accepted Answer · 2018-04-24 07:21:19Z

2

The second parameter is a callback - you're executing console.log immediately and passing its result as the callback. Change you code to this:

this.setState({
    languages: [...langs]
  }, 
  () => console.log(this.state.languages);
);

answered Apr 24, 2018 at 7:21

Jamiec

136k15 gold badges142 silver badges202 bronze badges

Collectives™ on Stack Overflow

using the spread operator in react setState on array of objects

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related