From React Challenges- Replicate to codepen

Tell us what’s happening:
I want to replicate this challenge to play with on codepen, i have the react.min.js and the react-dom enabled. Nothing is happening on the screen. How can I recreate the same counter on codepen? thank you

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 (nextProps.value % 2===0){
  return true;
}
     // change code above this line
  }
  componentWillReceiveProps(nextProps) {
    console.log('Receiving new props...');
  }
  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({
      value: this.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/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/optimize-re-renders-with-shouldcomponentupdate

You also need a line that connects your React to the HTML, a line at the end your your code like:

ReactDOM.render(<Controller />, document.getElementById("app"));

This would link to the html code like:

<div id="app"></div>

There is a working example in this pen.

Cute username, by the way.

Thanks its working, will send you all a link if i build something better out of it than just copy the fcc challenge.

Also, I do not see where you have used ReactDOM.render where you tell React where to put the Controller component.

Your solution was good, kevin’s just required me to think less, I rewarded him for spoon feeding. Err