this.setState() not updating state with passed array

Question

I am passing an array which contains the following credentials.:

//Snippet variable contains an array which looks like this

{
details: test, 
_id: "5d9d0b506ee7d03a54d8b1f6", 
name: "TEST GREEN", 
content: "<div style="background-color:green; height:100px; width:100px;"></div>", 
}

The array is recieved by a function, the function updates the state. The state looks like this:

  constructor(props) {
    super(props)
    this.showModal = React.createRef()
    this.state = {
      snippets: [],
      edit: null,
      show: false,
      sid: '',
    }
  }

The function looks like this

  handleModal = snippet => {
    console.log(snippet) //pastes output found in the snippet array above
    console.log(this.state) //{snippets: Array(3), edit: null, show: false, sid: ""}
    this.setState({ edit: this.snippet })
    console.log(this.state)//{snippets: Array(3), edit: null, show: false, sid: ""}
    this.setState({ sid: snippet._id })
    this.showModal.current.showModal()
  }

I know I have two setStates. I am trying to isolate the problem.

edit: null in the state should be becoming edit: Array(1) but setState seems to be failing.

In first setState you have used value for edit as this.snippet. Wouldn't you use snippet instead of this.snippet ? — Meet Zaveri
– Meet Zaveri, Commented Oct 9, 2019 at 13:00
setState is async, so logging directly after the function call won't do you much good unfortunately as it will not contain the updated values. — ApplePearPerson
– ApplePearPerson, Commented Oct 9, 2019 at 13:00
I guess you need to setState({edit: snippet}) and not this.snippet — gogaz
– gogaz, Commented Oct 9, 2019 at 13:01
Also, you can set multiple values within a singular setState call. For example: this.setState({ edit: snippet, sid: snippet._id }); — ApplePearPerson
– ApplePearPerson, Commented Oct 9, 2019 at 13:04
Possible duplicate of Why calling react setState method doesn't mutate the state immediately? — Rikin
– Rikin, Commented Oct 9, 2019 at 13:13

reisdev · Accepted Answer · 2019-10-09 13:04:22Z

3

There is two problems:

`this.snippet`

You should update your state using snippet instead of this.snippet

this.setState({ edit: snippet })

`this.setState` is asynchronous

The method this.setState() is asynchronous. Then, if you log right after it, the state problably won't be updated already. If you want to see the state after the update, passes a callback to the method, like below:

this.setState({ edit: snippet }, () => console.log(this.state))

answered Oct 9, 2019 at 13:04

reisdev

3,4202 gold badges21 silver badges42 bronze badges

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

Comments

Hung Nguyen · Accepted Answer · 2019-10-09 13:01:31Z

0

You should use snippet instead this.snippet.

answered Oct 9, 2019 at 13:01

Hung Nguyen

1,15611 silver badges20 bronze badges

Comments

kernel72 · Accepted Answer · 2019-10-09 13:02:42Z

0

setState doesn't update state immediately. It can take some time. If you want to do some actions only after state has been updated, put you code in setState callback.

this.setState({...newState}, () => {
 // actions after state update.
})

answered Oct 9, 2019 at 13:02

kernel72

996 bronze badges

Comments

ibtsam · Accepted Answer · 2019-10-09 13:08:25Z

0

this.snippet is noting, you should use

this.setState({ edit: snippet })

Hope it helps

answered Oct 9, 2019 at 13:08

ibtsam

1,7001 gold badge11 silver badges10 bronze badges

Comments

Vasilii Zaitcev · Accepted Answer · 2019-10-09 13:11:40Z

0

setState is asynchronous and the state is not updated immediately. Try to use the second parameter of setState - callback function

this.setState({ sid: snippet._id }, () => this.showModal.current.showModal())

answered Oct 9, 2019 at 13:11

Vasilii Zaitcev

11 bronze badge

Collectives™ on Stack Overflow

this.setState() not updating state with passed array

5 Answers 5

`this.snippet`

`this.setState` is asynchronous

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

this.snippet

this.setState is asynchronous

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

`this.snippet`

`this.setState` is asynchronous