Render a Class Component to the DOM?

Render a Class Component to the DOM?
0

#1

Tell us what’s happening:
I can’t get my code to render a class component to the DOM.

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 */}
        ReactDOM.render(
          <TypesOfFood />, 
          document.getElementById('challenge-node'));
        <Fruits />
        <Vegetables />
        {/* change code above this line */}
      </div>
    );
  }
};

// change code below this line
<div id='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.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/render-a-class-component-to-the-dom/


#2

This should be rendered.

<Fruits />
        <Vegetables />

and for rendering

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

#3

In the future, please do not create duplicate threads for the same challenge question(s). You got to responses on different threads and if someone did not already know you had the answer from a different thread you started, they would waste their time trying to help you.