Render to nested components

JavaScript
1

Tell us what’s happening:

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 (
  <TypeOfFruits  />
);
};

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/84.0.4147.105 Safari/537.36.

Challenge: Use React to Render Nested Components

Link to the challenge:

2

Reset the challenge, because it seems like you deleted some stuff. Remeber to only change things above change code above this line. Remember to not add an extra “s” at the end of the componenets.

3

As said before, this is the right name for the component:

<TypesOfFruit/>

Make sure it’s defined the right way:

function TypesOfFruit in case of functional, stateless components or class TypesOfFruit

Apart from that, the logic was perfect, well done.