React - Optimize Re-Renders with shouldComponentUpdate - solution not accepted

Tell us what’s happening:
Describe your issue in detail here.
So, instead of if(nextProps.value % == 0), I used if(this.props.value % 2 == 1)

The code works just fine, renders only on evens and get message every 2nd render, so, why does it not pass the fcc tests? Is it that the result has to be achieved with the nextProps object, or is it fine all fine and the test results simply do not cover this solution?
Your code so far

class OnlyEvens extends React.Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Should I update?');
    // Change code below this line
   if (this.props.value % 2 == 1) {
     return true
   }
    // Change code above this line
  }
  componentDidUpdate() {
    console.log('Component re-rendered.');
  }
  render() {
    return <h1>{this.props.value}</h1>;
  }
}

class Controller extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0
    };
    this.addValue = this.addValue.bind(this);
  }
  addValue() {
    this.setState(state => ({
      value: state.value + 1
    }));
  }
  render() {
    return (
      <div>
        <button onClick={this.addValue}>Add</button>
        <OnlyEvens value={this.state.value} />
      </div>
    );
  }
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.166 Safari/537.36

Challenge: React - Optimize Re-Renders with shouldComponentUpdate

Link to the challenge:

Your solution does not work for a couple of reasons because of two reasons in the following line.

if (this.props.value % 2 == 1) {
  1. You can not use this.props.value because this.setState does not immediately update the state. React batches the calls and then updates on its own time. The tests behind the scenes make back to back calls to update the state’s value property. The whole learning point of the lesson is that you must use nextProps because it will always have the most current value of state properties.

  2. If you do use nextProps correctly, your code still does not determine if the value is even correctly. You should research how to check a number to see if it is even.