React array inside state doesn't change

Question

scriptWriter = (data:ItemType) => {
    let id = data.id
    console.log(this.state.items.map(el => el.id === id ? data : el)) //#1
    this.setState({
        items: this.state.items.map(el => el.id === id ? data : el)
    })
    console.log(this.state.items) //#2
}

this is my code. i'm trying to change element inside state array. but #1 code's result and #2's result are diffrent. I want to change this.state.item to #1 result. is there a any solution?

State changes are asynchronous, you can't `console.log` on the next line and see the change — Jayce444, Oct 07 '20 at 01:40

score 0 · Accepted Answer · answered Oct 07 '20 at 01:42

That is because setState is asynchronous in nature, use a callback to log state value which will be invoked after state is update:

this.setState({
    items: this.state.items.map(el => el.id === id ? data : el)
  },
  () =>  console.log(this.state.items)
);

React array inside state doesn't change

1 Answers1