Render HTML Elements to the DOM

JavaScript
1

Tell us what’s happening:
I can’t complete the challenge because i didn’t understand the explanation,
so, i go to react website to get information about rendering but no benefit
also.
Please some one help to complete this challenge with explanation.
Your code so far


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

Your browser information:

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

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/render-html-elements-to-the-dom

2

There are a few problems with your code.

First of all the html document will look something like this:

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

(It is hidden on this challenge)

What ` ReactDOM.render does is take the first argument and place it in the second argument:

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

will create:

<div class="challenge-node">
  firstArgument
</div>

You want you output to look like this:

<div class="challenge-node">
  <div>
    <h1>Hello World</h1>
    <p>Lets render this to the DOM</p>
  </div>
</div>

The first thing you need to do is change you code back to this:

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

Part of your render code is correct:

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

All you need to do is work out what you need to replace the question marks with. (HINT: it is simpler than you might think.)

Hope this helps :slight_smile:

3 Likes
3

Hi @oliverdudman,
Thank you very much for helping, i read your explanation, but still have a problem,
if you can give me solution it will be better, so i can understand it from solution.

My new code here

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

// change code below this line
const element = <p>Hello from my node</p>;
ReactDOM.render(element,document.getElementById('challenge-node'));

My browser i worked from in Chrome/66.0.3359.181

also i preferred to this link after reading your explanation:
Link: https://reactjs.org/docs/rendering-elements.html
Challenge link: https://learn.freecodecamp.org/front-end-libraries/react/render-html-elements-to-the-dom

4

What is wrong is my code

var ReactDOM = require('react-dom');
var React = require('react');

var tag = React.createClass({
  render: () => {
    const JSX = (
      <div>
        <h1>Hello World</h1>
        <p>Lets render this to the DOM</p>
      </div>
    );
    return JSX;
  }
});

// change code below this line
ReactDOM.reder(tag, document.getElementById('challenge-node'));

It show error follows:

// running test
require is not defined
require is not defined
require is not defined
require is not defined
// tests completed
5

You are almost there, you don’t need this line:

const element = <p>hello world</p>

as you already have a const with the element written for you. It is the JSX element that you will need to pass to the render function and not the element you have created. Have another go and come back if you are still having trouble.

1 Like
6

You really need to create a new post for this, but there is a spelling mistake that might be the source of your problems.

render not reder

7

Hi @sithuhlaing,

I think you don’t assign id to the div element.

You can assign id to the div like this:

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

Hope this help you, good luck my friend, because i am stuck also like you in this challenge.

8

That’s correct, if you are doing the same challenge, then you have changed lines of code that you shouldn’t. You will need to reset the code to the original. Think about what you need to do to this line:

ReactDOM.reder(tag, document.getElementById('challenge-node'));

This is the only line of code you will need, there is a spelling mistake and if you have reset your code, then the will no longer be a tag variable. (you do not need to create one)

2 Likes
9

Hi @oliverdudman,

Thank you very much for helping me, but i am stuck in this challenge,
if you insert a full answer, this will be a greet help from you, thanks again.

Challenge link: https://learn.freecodecamp.org/front-end-libraries/react/render-html-elements-to-the-dom

Please help me, so, i can finish this challenge, thank you for your advice and time.

Regards,
Ali Mosaad

10

Ok, this code:

const anyNameHere = (
  <h1>Hello world</h1>
);
reactDOM.render(anyNameHere, document.getElementById("challenge-node");

will result in:

<div class="challenge-node">
  <h1>Hello world</h1>
</div>

This code:

const anyNameHere = (
  <div>
    <h1>Hello world</h1>
    <p>Let's render this to the DOM</p>
  </div>
);
reactDOM.render(anyNameHere, document.getElementById("challenge-node");

will result in:

<div class="challenge-node">
  <div>
    <h1>Hello world</h1>
    <p>Let's render this to the DOM</p>
  </div>
</div>

If you copied and pasted the code (don’t do that though), then you would have the right output. If you examine the code then you will see that there is only one thing different. There is a reason why I called my const anyNameHere. It could for example be called JSX.

If it were, in the render method we would then replace anyNameHere with JSX.

Sorry for not giving a solution yet, it is important that you learn to recognise where you have gone wrong. If you can’t get it this time then, I will post an answer.

2 Likes
11

Hi all,

Please i need solution for this challenge

render HTML elements to the DOM
Link of challenge: https://learn.freecodecamp.org/front-end-libraries/react/render-html-elements-to-the-dom/

Please i need a full worked solution, I am stuck from yesterday in this lesson, any one help with full worked solution please.

Regards all,
Ali Mosaad Mohamed

12

Hi everyone,

I solve the problem and this is the worked solution if any one stuck here

Solution:

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

Good Luck to every one and any one need help just ask and i will give you full worked answer because
"Science for all not for one"

13 
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"));
14

Oliver, thank you for this well craft explanation and not just putting the answer - it is too easy just to see the answer and move on but actually this is a better way of doing explain it :slight_smile:

Cheers!!

15

can you explain your code??

16

can you explain… ??