Use React to Render Nested Components how to do?

JavaScript
1

Tell us what’s happening:

The TypesOfFood component should return the Fruits component.
why?

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 */ }
      <TypesOfFruit />
        { /* 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/75.0.3770.142 Safari/537.36.

Link to the challenge:

2

The hierarchy of your components is wrong.

You have

TypesOfFood -> TypesOfFruit

Fruits is strangely trying to contain TypesOfFood, but nothing is displaying Fruits so it never appears.

They want:

TypesOfFood -> Fruits -> TypesOfFruit

If you read the instructions:

Take the TypesOfFruit component and compose it, or nest it, within the Fruits component. Then take the Fruits component and nest it within the TypesOfFood component.

In other words, each component is getting nested in the one below it. Or, the reverse of that, as in my diagram, each component contains the one above it.

It the real world React, these components would probably be in their own files, but if they’re in one file, they are often organized this way.