Tell us what’s happening:
I keep getting an error. I checked the hint, and my code matches the example. It says there’s already an element with the id added, but it’s not in the DOM. So I added it, removed it, and still got an error. Am I missing something?
**Your code so far**
class TypesOfFood extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<h1>Types of Food:</h1>
{/* Change code below this line */}
<Fruits />
<Vegetables />
{/* Change code above this line */}
</div>
);
}
};
// Change code below this line
ReactDOM.render(<TypesOfFood />, document.getElementById=('challenge-node'));
**Your browser information:**
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:94.0) Gecko/20100101 Firefox/94.0
to make sense of the code(and memorize the right syntax), know that document is an object and getElementById is one of its many methods. As you may know, methods are functions declared within objects and just as any function, you pass parameters to then using parenthesis and just like you would call dogObj.bark() you say document.getElementById() and you pass in, the name of the id.
As a matter of fact, ReactDOM is also an object and render is its method. The “render” method takes two arguments, the react component you want to render(display on the page) and the HTML element where the component should be attached. We reference that element, by accessing the document object, where data for the HTML document is stored, and call the element we mean, by its Id. Somewhere on the HTML file, there will be <div id="challenge-node">, which is used as an anchor for the react application(the page you design).