Difficulty figuring out ReactDOM.render

This is exercise, the <div> tag doesn’t have an id named ‘challenge-node’ but when rendered in the ReactDOM.render() it works when an id of ‘challenge-node’ is added at the second argument, can someone explain please

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

ReactDOM.render(JSX, getElementById('challenge-node')) 

const JSX = (
<div>
  <h1>Hello World</h1>
  <p>Lets render this to the DOM</p>
</div>
);
// Change code below this line
  **Your browser information:**

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

Challenge: Render HTML Elements to the DOM

Link to the challenge:

Your confusion makes perfect sense. What you don’t see is that there would be an HTML file with a div with that ID. To make it easier for beginners, FCC has hidden that from you for the moment. But it will be introduced later.

Yeah, good eye on catching that, but that will be added in later.

1 Like

thank you, that makes sense because it really got me wondering where it came from. i even had to add the ID myself and the code still ran. thanks for the clarity…

Right, but it goes in the “real” HTML, not the JSX. But that will be covered later. That’s the easy part of React.

1 Like