Trouble rendering to the DOM

This isn’t rendering to the DOM. What’s wrong?

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h1>My First React Component!</h1>
      </div>
    );
  }

};

ReactDOM.render(MyComponent, document.getElementById("challenge-node"));

Hello there,

Here is the issue:

ReactDOM.render(MyComponent,

If you go to the previous lesson, you will see this:

React components are passed into ReactDOM.render() a little differently than JSX elements. For JSX elements, you pass in the name of the element that you want to render. However, for React components, you need to use the same syntax as if you were rendering a nested component, for example ReactDOM.render(<ComponentToRender />, targetNode) . You use this syntax for both ES6 class components and functional components.

Hope this helps

1 Like