DOM node? wasat?

just a quick answer wud be nice:
where is this node (challenge-node)?
what is it? would i have written it somewhere else, as a <div id=“challenge-node”…> ?

  **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
ReactDOM.render(JSX, document.getElementById('challenge-node'))
  **Your browser information:**

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

Challenge: Render HTML Elements to the DOM

Link to the challenge:

That is three HTML DOM nodes. The root div node, and the two it contains. Also a few text nodes. :grin:

1 Like

so which is ‘challenge-node’?

That is in the imaginary HTML. In a real react app, you would have an HTML file with something like:

<div id="challenge-node"></div>

The line:

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

is saying take whatever is in the variable JSX and insert it at the element with the id “challenge-node”.

It doesn’t have to be called “challenge-node”, it just has to match whatever is in the HTML.

It’s a bit confusing to you because you are in the “fake” FCC learning environment and can’t see the other file.

1 Like

The line in the instructions:

There is a div with id='challenge-node' available for you to use.

Is basically saying what I was saying, just perhaps not as explicitly. They are saying, “don’t worry about it, we have a div with that id already taken care of”.

3 Likes