Use React to Render Nested Components crashing?

[Obizwan]

Hello hello! I am currently doing the React section in the Front End curriculum, and I am on this challenge:

freeCodeCamp.org

Whenever I write the response, unfortunately it crashes the page. I have tried on another computer and different browsers, but the page just straight up crashes. Anyone else is experiencing that?

Many thanks,

const TypesOfFruit = () => {
return (
  <div>
    <h2>Fruits:</h2>
    <ul>
      <li>Apples</li>
      <li>Blueberries</li>
      <li>Strawberries</li>
      <li>Bananas</li>
    </ul>
  </div>
);
};

const Fruits = () => {
return (
  <div>
    { /* Change code below this line */ }
<TypesOfFood/>
    { /* Change code above this line */ }
  </div>
);
};

class TypesOfFood extends React.Component {
constructor(props) {
  super(props);
}

render() {
  return (
    <div>
      <h1>Types of Food:</h1>
      { /* Change code below this line */ }
<Fruits/>
      { /* Change code above this line */ }
    </div>
  );
}
};

  **Your browser information:**

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

Challenge: Use React to Render Nested Components

Link to the challenge:

freeCodeCamp.org

[ilenia]

you have a loop, as Fruits is being rendered inside TypesOfFood and TypesOfFood is being rendered inside Fruits
that makes the page crash
if you can’t Reset the code before the page crashes you need to delete the browser cache for freeCodeCamp

you also never use TypesOfFruit

[Obizwan]

Of course, that is my bad, I didn’t realize I had to write TypesOfFruit and not TypesOfFood, that is a really dumb mistake from me, thank you!