React's setState is asynchronous

React’s setState is asynchronous: read this.state right after calling it and you may get the old value. To act on the new state, pass a callback, or use componentDidUpdate (which also fires on prop changes). From React gotchas.

this.setState({ name: 'Jon' }, () => {
  // runs after the state update and re-render
});