React challenge: Render a Class Component to the DOM

JavaScript
1

I think I am doing it right, but the console says:

Cannot read property 'innerHTML' of undefined

this is the code I filled in:

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

the link is here: https://learn.freecodecamp.org/front-end-libraries/react/render-a-class-component-to-the-dom

I do think this challenge is a easy one, but I just don’t get it why the error shows up. Please drop a hint, thanks!!

2

You are missing a few characters on the last line. Go to the instructions and look at the pseudocode, especially around TypesOfFood.

1 Like
3

Ah, I got it.
I wrapped the TypesOfFood within<TypesOfFood />, and it’s done!
Thank you for your hint!

2 Likes