Why should we specify id="challenge-node" in <div>. Earlier exercises didn't mentioned it?

Tell us what’s happening:
Describe your issue in detail here.

  **Your code so far**

// change code below this line
class MyComponent extends React.Component{
constructor(props){
  super(props);
}
render(){
  return(
        <div id="challenge-node">
               <h1>My First React Component!</h1>
        </div>
  );
}
};
ReactDOM.render(<MyComponent/>, 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/91.0.4472.77 Safari/537.36 Edg/91.0.864.41

Challenge: Write a React Component from Scratch

Link to the challenge:

Welcome there,

Please make use of the Tell us what’s happening section to ask your question, and provide extra information. Short and informative titles are more likely to get Campers to help you, and keep the forum more tidy.


Would you mind explaining what you are confused about? There are numerous previous challenges talking about the id="challenge-node" div:

It’s worth noting that under the hood the challenges are calling ReactDOM.render(JSX, document.getElementById(‘root’)). This function call is what places your JSX into React’s own lightweight representation of the DOM. React then uses snapshots of its own DOM to optimize updating only specific parts of the actual DOM.

ReactDOM offers a simple method to render React elements to the DOM which looks like this: ReactDOM.render(componentToRender, targetNode) , where the first argument is the React element or component that you want to render, and the second argument is the DOM node that you want to render the component to.

Here’s a refresher on the syntax: ReactDOM.render(componentToRender, targetNode) . The first argument is the React component that you want to render. The second argument is the DOM node that you want to render that component within.

React components are passed into ReactDOM.render() a little differently than JSX elements. For JSX elements, you pass in the name of the element that you want to render. However, for React components, you need to use the same syntax as if you were rendering a nested component, for example ReactDOM.render(<ComponentToRender />, targetNode) .

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.