React in code pen

I cant seem to get React to work in code pen. I did some searching on the forums, and online but nothing worked. My js is babel and I added react as a library, but I cant even get an h1 to render. below is my code, and in my html section I have

<div id="app"></div>
class StatefulComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'cody'
    }

  }
  render() {
    return (
      <div>
        <h1>{this.state.name}</h1>
      </div>
    );
  }
};
react.render(<StatefulComponent />, document.getElementById('app'));

Make sure to add the “react-dom” package into your codepen in addition to adding React (as you’ve already done). Then, try adding this to the top of your Javascript code:

const { render } = ReactDOM;

Then replace your last line with the following:

render(<StatefulComponent />, document.getElementById('app'));

Alternatively, after adding in the “react-dom” package, you could simply make the last line of your JS code this and omit the initial const I suggested:

ReactDOM.render(<StatefulComponent />, document.getElementById('app'));
1 Like

Got it! I added the dom package, but also noticed I was using a lower case r for react.render instead of a uppercase.