React setstate take previous values

Question

I wrote the below react component to handle the difficulty level of the minesweeper clone which I am making using react.

I have used radio buttons as difficulty input and would like to set the state of the component based on the selection made.

My problem is that every time I change my selection, the state is updated with my previous selection and not the current selected value. For instance, during page load the selected difficulty is ”Easy”. When I change the difficulty to say “Hard” the state still show the initial setting i.e “Easy” (I did a console log of the state to verify this).

Please help.

import React, {Component} from 'react';

class Difficulty extends Component{

  state = {
      height: 8,
      width: 8,
      mines: 10,
  };

  setDifficulty(event){
    let selectedDifficulty = event.target.value;
    if (selectedDifficulty === "Easy") {
        this.setState({
            height: 8,
            width: 8,
            mines: 10,
        });
    }
    if (selectedDifficulty === "Medium") {
        this.setState({
            height: 12,
            width: 12,
            mines: 20,
        });
    }
    if (selectedDifficulty === "Hard") {
        this.setState({
            height: 16,
            width: 16,
            mines: 40,
        });
    }
    this.props.updateDifficulty(this.state);
  }

  render(){
    return(
      <div className="game-difficulty">
        <div className="difficulty" onChange={this.setDifficulty.bind(this)}>
          <input type="radio" value="Easy" name="gender" defaultChecked="true" /> Easy
          <input type="radio" value="Medium" name="gender" /> Medium
          <input type="radio" value="Hard" name="gender" /> Hard
        </div>
      </div>
    );
  }
}

export default Difficulty;

Answer 1

setState is asynchronous, so this.state will still contain the previous values if you try to use it right after calling setState.

You could instead do your logic that depends on this.state in a function given as the second argument to setState which will be run when the state has been updated.

setDifficulty(event) {
  let selectedDifficulty = event.target.value;
  let values;

  if (selectedDifficulty === "Easy") {
    values = {
      height: 8,
      width: 8,
      mines: 10
    };
  }
  if (selectedDifficulty === "Medium") {
    values = {
      height: 12,
      width: 12,
      mines: 20
    };
  }
  if (selectedDifficulty === "Hard") {
    values = {
      height: 16,
      width: 16,
      mines: 40
    };
  }

  this.setState(values, () => {
    this.props.updateDifficulty(this.state);
  });
}