Nsryjdtyk

I need to change state in a React component depending on the number output by clicking a button. The button increments a counter in state. If the number is prime, it should change the isPrime state to true; if not isPrime should be false.

  class Counter extends Component {



    constructor(props) {

        super(props);

        this.state = {

          count:0,

          isPrime: false

        };

      }



checkPrime = (num) => {

    if (num === 1) return false;

    if (num === 2) return true;

    for(var i = 2; i < num; i++) {

        if(num % i === 0) {

            return false; // it isn't prime

        }

    }

    return true; //it is prime

  }



incrementItem = () => {

    this.setState((prevState, { count }) => ({

    count: prevState.count + 1

  }));

    if (this.checkPrime(this.state.count)) {

        this.setState({ isPrime: true });

    }

    else {

        this.setState({ isPrime: false });

    }

}





render() {

    return (

      <div id="mainDiv" className={this.state.isPrime ? 'bgPrime' : ''}>

        <button onClick={this.incrementItem}>Click me</button>

        {<h2>{ this.state.count }</h2> }

      </div>

    );

  }

}



export default Counter;

In the incrementItem function, I couldn't get the following syntax to work as suggested here:

    this.setState((prevState, { isPrime }) => {

            isPrime: true

     });

// ('Expected an assignment or function call and instead saw an expression  no-unused-expressions')

Try this incrementItem method:

incrementItem = () => {

  this.setState((prevState) => {

    const count = prevState.count + 1

    return { count, isPrime: this.checkPrime(count) }

  })

}

It should work because count is updated immediately and synchronously, then used by this.checkPrime, rather than trying to access this.state.count before it's been updated by setState.

The suggestion was implemented incorrectly. What this article suggested is to use updater function, which is first setState argument. Updater function accepts previous state and current props as parameter and returns new state:

this.setState((prevState, props) => ({ isPrime: true }));

Since neither state not props aren't used in new state, there's no need for updater function. If the update was unconditional, it would be just:

this.setState({ isPrime: true });

But the purpose of updater function is to prevent race conditions because state updates are asynchronous. This piece will cause race conditions because state.count may be accessed before it was updated:

this.setState((prevState, { count }) => ({

  count: prevState.count + 1

}));

if (this.checkPrime(this.state.count)) {

...

Instead, both state updates should be done with updater functions to keep the order in which they are executed:

incrementItem = () => {

  this.setState((prevState) => ({

    count: prevState.count + 1

  }));



  this.setState((prevState) => ({

    isPrime: this.checkPrime(prevState.count)

  }));

}