Help me in use react to render nested components

Tell us what’s happening:
i am having a error in my code, it is not working. please check my code and tell me what is the error in my code.

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 */ }
   <h2>Fruits:</h2>
    <ul>
      <li>Apples</li>
      <li>Blueberries</li>
      <li>Strawberries</li>
      <li>Bananas</li>
    </ul>
      { /* change code above this line */ }
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; ) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.129 Safari/537.36.

Challenge: Use React to Render Nested Components

Link to the challenge:

Hello!

In your TypesOfFood constructor, you don’t need to write out all that code. You can just call <Fruits /> and the code will use the fruits constructor.
You still need to scroll up to your fruits constructor and complete that as well.

type or paste code here
```

You don’t need to use Fruits

Hi @ebrossett!

Thank you for your enthusiasm on the forum!

The last few question you have responded to already have been marked with a solution provided.
Screen Shot 2020-12-07 at 12.25.14 PM

There are plenty of other questions on the forum that haven’t been solved that would love your input and suggestions.

Thanks!