Web page crashes when I run test in "Render a Class Component to the DOM"

Tell us what’s happening:
Here’s my code. When I tried to run the test to see if it was correct, the web page crashes. So I clicked the “get help” link to see if my answer was correct, and it was. So has anyone run into this exact problem?

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

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

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

Challenge: Render a Class Component to the DOM

Link to the challenge:

Hello @jgl2j , welcome to the forum.

Your page crashes because you have created an infinite loop:

You are rendering TypesOfFood which is then rendering itself:

      <h1>Types of Food:</h1>
      {/* Change code below this line */}
        ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'))
      {/* Change code above this line */}
    </div>

The challenge is asking you to render two new components created for you under the scene: Fruits and Vegetables.

Both the Fruits and Vegetables components are defined for you behind the scenes. Render both components as children of the TypesOfFood component, then render TypesOfFood to the DOM

Or to sum it up:
TypesOfFood should render Fruits and Vegetables.
Your page should render TypesOfFoods.

Hope this helps.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.