0

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.

reisdev
  • 3,215
  • 2
  • 17
  • 38
Neil Morgan
  • 626
  • 4
  • 17
  • 1
    In first `setState` you have used value for `edit` as `this.snippet`. Wouldn't you use `snippet` instead of `this.snippet` ? – Meet Zaveri Oct 09 '19 at 13:00
  • 2
    `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 Oct 09 '19 at 13:00
  • 1
    I guess you need to `setState({edit: snippet})` and not `this.snippet` – gogaz Oct 09 '19 at 13:01
  • 1
    Also, you can set multiple values within a singular `setState` call. For example: `this.setState({ edit: snippet, sid: snippet._id });` – ApplePearPerson Oct 09 '19 at 13:04
  • Possible duplicate of [Why calling react setState method doesn't mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-calling-react-setstate-method-doesnt-mutate-the-state-immediately) – Rikin Oct 09 '19 at 13:13

5 Answers5

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))
reisdev
  • 3,215
  • 2
  • 17
  • 38
0

You should use snippet instead this.snippet.

Hung Nguyen
  • 1,026
  • 11
  • 18
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.
})
kernel72
  • 89
  • 6
0

this.snippet is noting, you should use 

this.setState({ edit: snippet })

Hope it helps

ibtsam
  • 1,620
  • 1
  • 10
  • 10
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())

Vasilii Zaitcev
  • 1
  • 1