Render a Class Component to the DOM keeps crashing

Tell us what’s happening:
Everytime I click “Run the tests” the page freezes and then eventually crashes. I checked the hints section and the code is correct, why is this happening?

  **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.getElementId('challenge-node'));
      {/* Change code above this line */}
    </div>
  );
}
};

// Change code below this line
  **Your browser information:**

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36

Challenge: Render a Class Component to the DOM

Link to the challenge:

To give you push in the right direction - could you try to explain what the code is doing?

what do you think should go here?

TypesOfFood is the parent component and the two components <Fruits /> and <Vegetables /> are child components.

You need to render the parent using ReactDOM.render but not inside itself. Then you add the <Fruits /> and <Vegetables /> components inside the parent component.

Think of the components as functions.

function parent() {
  return (
    <div>
      firstChild();
      secondChild();
    </div>
  );
}

function firstChild() {
  return `JSX`;
}

function secondChild() {
  return `JSX`;
}

parent();