Bug: Render a Class Component to the DOM Solved

I try to solve this exercise Render a Class Component to the DOM but the console trow this:

// running tests

The TypesOfFood component should render to the DOM within the div with the id challenge-node.

// tests completed

My code:


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

const Vegetables = () => {
  return (<div>
    <h2>Vegetables</h2>
  </div>);
};

const Fruits = () => {
  return (<div>
    <h2>Fruits</h2>
  </div>
  );
}

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

Sorry the components Vegetables and Fruits exists and broke the output.

The solution was

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