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

JavaScript
1

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:

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.