Help with React Library

JavaScript
1

Tell us what’s happening:

Help with React Library
here is the link:

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.102 Safari/537.36.

Challenge: Render HTML Elements to the DOM

Link to the challenge:

2

Let React tell it to you.

3

What have you tried?

Looking at the instructions, all the information is there.

You need to add a line at the bottom, of the form of:

ReactDOM.render(componentToRender, targetNode)

You need to add a line like this. This is a method that tells React how to connect up to the app. The componentToRender is the root component of your React app (in your React code) and the targetNode is the element in your HTML where you want your React to render. (You can’t actually see it in this case because it would be in an HTML file, but they are telling you the standard way to connect to it.)

So, you need that line above and you need to substitute for those two parameters.

So, what is _ componentToRender_? The instructions tell you:

The code editor has a simple JSX component. Use the ReactDOM.render() method to render this component to the page. You can pass defined JSX elements directly in as the first argument …

So, it is the code that is already given, with the very convenient name.

So, what is targetNode? This is a little more complicated, but again, the instructions say:

… and use document.getElementById() to select the DOM node to render them to. There is a div with id='challenge-node' available for you to use.

So, for the second parameter, you need a DOM node. It is telling you there is a (hidden from you) DOM element with a specific ID and you can use document.getElementById to get a reference to that node. So, you call document.getElementById pass it the relevant ID and it will return the reference, which then becomes your second parameter to the render method_, You can store it in a variable, but it is more common just to do it right inline.

Does that help?

4

I’ll try again . Is like a different language

5

Yup, it is. It is exactly like learning a different language. And React is a whole other language than JS. It is very weird at first, but eventually it makes sense and can be very cool and powerful.

1 Like
6

it helps but I am still confused. I got this so far based on your reply
ReactDOM.render(document.getElementById,id=‘challenge-node’);

7

OK, I’m trying to not give away the answer, but let’s inch a little closer.

ReactDOM.render(document.getElementById,id=‘challenge-node’);

First of all, your first parameter to ReactDOM.render needs to be your root React node or JSX, which in this case is stored in a variable called JSX. That needs to be the first parameter.

Secondly, your second parameter needs to be the reference to your DOM node. You can select that node with the function document.getElementById. If my DOM node had an ID of ‘my-app’, I would use `document.getElementById(‘my-app’).

Does that help?

1 Like
8 
ReactDOM.render()

document.getElementById(challenged-node);

Like this ? I’m lost
9

You almost have the correct value of the second argument for the ReactDOM.render() method. For the first argument, you just need to pass the JSX variable, because that what you want to render to the element with id=‘challenge-node’.

The value passed to the document.getElementById() method needs to be a string.

1 Like
10

I Got it. Thanks this was a tough one. Thanks community:
ReactDom.render(JSX, document.getElementById(“challenge-node”))
It took me 6 hours to figure it out! gosh

11

Thanks dude. sorry about earlier. This problems was stressing me out. I figure it out thanks to the community here.

12

Yeah, that’s why the forum is here. We all have stumbling blocks like this. This is not easy stuff to learn - that’s why it pays well.

1 Like