Need Help with Rendering

Tell us what’s happening:
The document.getElementById does not seem to work

Your code so far


// const JSX = (
//   <div>
//     <h1>Hello World</h1>
//     <p>Lets render this to the DOM</p>
//   </div>
// );
// change code below this line

const JSX = (
  <div id ="challenge-node">
    <h1>"Hello World"</h1>
    <p>"Lets render this to the DOM"</p>
    ReactDOM.render(document.getElementById('challenge-node'));
  </div>
);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36.

Link to the challenge:

So why are you trying to render that within your JSX? You don’t see that as… hinky?

You commented out the original JSX, when the instructions say:

// change code below this line

This means, leave that JSX initialization alone! How would you render that element, once it is initialized, into the given #challenge-node?