Render a Class Component to the DOM 4th Test

Not sure why exactly I’m failing the fourth test for this

The TypesOfFood component should render to the DOM within the div with the id challenge-node. I think I’m doing that correctly in my last line, any ideas on what I’m missing here?

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; WOW64; rv:52.0) Gecko/20100101 Firefox/52.0.

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

You don’t need the ; after the components.

Try like this:

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