Use React to Render Nested Components 5

JavaScript
1

Tell us what’s happening:
This code is confusing me completely. I tried putting in the <dog / > like it said to, but it didn’t work in the hints. I’m not sure what I’m doing wrong, or how in the world I’m able to solve this. I’ve used just about everything I could think of to make this work, and it’s confusing me.

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 */ }
      
      { /* 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 */ }

        { /* change code above this line */ }
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36 Avast/73.0.1258.87.

Link to the challenge:

2

first of all you need to google those therms : " functional components and class components " .

then when you understand how each works , return to this answer .

what i did basically is nesting TypesOfFruit in Fruits, then nesting Fruits in TypesOfFood

and that’s it .

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 */ }
        <TypesOfFruit />
      { /* 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>
    );
  }
};
1 Like
3

Whenever I try to input the correct code, it freezes up on my laptop. Should I try restarting the browser or use another browser?

4

i think you’re doing something wrong in your code , because i already run into the same problem .
the cause was something like an infinite loop but for nesting .
a component is nesting another component that is nesting the first one :smile: (read it slowly)

5

I have been inputting the correct code. I’m not doing anything wrong with the code. My laptop keeps freezing up when I try to do the code on a Google Chrome browser.

6

well that must be something else then , because i tested the code in here and it passes the test normally .

7

I’m not sure what it could be, because my laptop won’t let me run it at all. I get the code in, I try to hit the “Run Code” as fast as I can, and the page freezes up on me.

8

to be sure you can test it in another browser

9

I have tested it in FireFox and it didn’t work as well. I’ll try Internet Explorer, to see if it’ll work there, and if it doesn’t, I’m not sure what to do.

10

It’s easy to mess up and accidentally enter <TypesOfFood/> inside the Fruits component, instead of <TypesofFruit/>. This will cause infinite recursion and blow up memory usage. It will eventually stop, but it will be unresponsive for enough time that it’s effectively locked up.

11

I have fixed that already, but it won’t work on my Internet Explorer browser, like, no code showing up at all, which is very odd.