Can't get React Output to Display in Codepen

Tell us what’s happening:
I’m trying to work with this lesson in codepen.io to experiment with the concept and learn more about it. However, I can’t get the output to display. There’s no button or text displaying.

codepen JS setup: I have Babel as the preprocessor and I have the React and React-DOM added in the JS pane. I know that in codepen, if even one thing is off in any sort of way it tends to display nothing at all as a result on the screen. I have done other React things in codepen and got them to display. Can somebody tell me how they got this to display in codepen, please.

Your code so far

   {/*code in condepen's JS pane:*/}
class OnlyEvens extends React.Component {
  constructor(props) {
    super(props);
  }
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Should I update?');
     // change code below this line
    return nextProps.value %2 == 0;
     // 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({
      value: this.state.value + 1
    });
  }
  render() {
    return (
      <div>
        <button onClick={this.addValue}>Add</button>
        <OnlyEvens value={this.state.value} />
      </div>
    );
  }
};

ReactDOM.render(<OnlyEvens />, document.querySelector('#headline'));


<!-- and this is the code I have in the HTML pane: -->
<div id =  "headline">

class OnlyEvens extends React.Component {
constructor(props) {
  super(props);
}
shouldComponentUpdate(nextProps, nextState) {
  console.log('Should I update?');
   // change code below this line
  return nextProps.value %2 == 0;
   // 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({
    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/81.0.4044.122 Safari/537.36.

Challenge: Optimize Re-Renders with shouldComponentUpdate

Link to the challenge:

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

Hey, if you still haven’t been successful in getting your pen to show up, I found the problem in your code.

At the very bottom of your JS pane, you are rendering the OnlyEvens component to the screen. I’m pretty sure you meant to put the Controller component there instead, since the Controller component renders the OnlyEvens inside itself.

In the code you supplied, CodePen is technically rendering the OnlyEvens component, but because you weren’t supplying it a value, it wasn’t visible on the screen.

I’m not really sure what the issue was. Luckily, in later lessons, those lessons rendered on the codepen.io screen and I was able to play around with the code to learn more about it.

Here’s a dice roller with some RPG feedback that I made with the age verification bouncer lesson’s code:
https://codepen.io/Dpodrasky/full/RwWZbLv