React - Use React to Render Nested Components

Tell us what’s happening:
its throwing infinite loop error

Your code so far

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/107.0.0.0 Safari/537.36

Challenge: React - Use React to Render Nested Components

Link to the challenge:

Well, there is an infinite loop cause the Fruits is rendering TypesOfFood and TypesOfFood renders Fruits, and so on and on…
See that you are not using TypesOfFruit, I believe you can figure out the rest!

Rightly said. The problem is that your TypesOfFood component is rendering your Fruits component which is rendering your TypesOfFood component and so on.

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