React: Render a Class Component to the DOM -- ReactDOM.render() not working

JavaScript
1

Hey all. This should be pretty simple. The below is returning the error “Cannot read property ‘innerHTML’ of undefined”.

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

The error means that “document” isn’t even defined, so it cannot access challenge-node from nothingness, right? How can I fix this?

Also, bonus issue, the “Create a Component with Composition” is broken for me. I seemingly input code that breaks the browser, but it saved that code so that every time I come back to it it auto breaks. How can I reset the code?

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

Error:

// running test
Cannot read property 'innerHTML' of undefined
// tests completed
4

Try looking for what format your arguments need to be in the ReactDOM.render() call. If you are still having trouble here is spoiler.

ReactDOM.render(<TypesOfFood />, document.getElementById("challenge-node"));
1 Like
6

facepalms for eternity

…thanks guys!

7

I am trying to understand this Reference below in simple English. Would this be a good way to think about this (though it may be imprecise):

ReactDOM is like a library of functions that allows you to use Javascript and convert (or render) it to HTML.
.render is like a class or object within ReactDOM to render.
The first argument Types of Food, in this case, is a class of objects that you want to render into HTML.
The second argument document.getElementById(“challenge-node”) - actually I’m confused what this long convoluted wording means. The “Render HTML Elements to the DOM” lesson describes it as: “the DOM node that you want to render the component to”. What does that mean in simple English? Is DOM node like elements in HTML like body, title, text, buttons, etc - different “elements” of the HTML page, right? So, should I think of this second argument document.getElementById(“challenge-node”) like a location on the HTML page? Why do they word it so confusingly? Any way to parse this verbiage into easier meaning?

Reference:

ReactDOM.render(<TypesOfFood />, document.getElementById("challenge-node"));
8

document is a class within js and .getElementById() is a method that as I understand it returns the specified HTML element. You could in this challenge write out the second argument long hand and achieve the same end result.

ReactDOM.render(<Component />, <div id="challenge-node"></div>);

The first argument is easily understood as the JSX contained in the component to be rendered. I like to think of the second element as the target element that the component will be a child of.

9

In the second argument (e.g. document.getElementById…), can you pass an alternative argument so that ReactDOM.render does something else?

10

According to the react documentation you can pass a callback function that will execute after the component is rendered. The documentation does not provide an example so I am unsure as to how this is used.

11

Hey my friend! instead of:
ReactDOM.render(TypesOfFood, document.getElementById('challenge-node'))
try:
ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'))
the first argument should be written using JSX format