Render HTML Elements to the DOM React

JavaScript
1

Tell us what’s happening:

I have done everything there is to be done. Can somebody highlight the mistake that was made.

Your code so far


import React from 'react';
import ReactDOM from 'react-dom';

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.getElementsById('challenge-node'));

Your browser information:

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

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

2

Render takes two arguments, the first is your element, the second is what you’re rendering it to.

React elements are capitalised, like ChallengeNode (they can’t be lowercase, and they can’t have hyphens). And the element that you are rendering to is not going to be the same element you are trying to render, you are putting that element into whatever DOM element you specify.

3 
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'));
3 Likes