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.