React - Use React to Render Nested Components

Tell us what’s happening:
Describe your issue in detail here.

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/104.0.5112.124 YaBrowser/22.9.5.710 Yowser/2.5 Safari/537.36

Challenge: React - Use React to Render Nested Components

Link to the challenge:

Как решить эту задачу я не понимаю)))

You are calling TypesOfFood from Fruit and Fruit from TypesOfFood. One of those should be changed to TypesOfFruit.

Я вызвал но он не правельный.

You are not using the TypesOfFruit component and it should be used in the Fruit component

const Fruits = () => {
return (


{ /* Change code below this line / }


{ /
Change code above this line */ }

);
};

не работает

Как такое можно понять я не знаю .
Результатом должен быть дочерний компонент, вложенный в родительский компонент, который вложен в собственный родительский компонент!
для чего эти не понятные сложности?

You left the component empty, You should put <TypesOfFruit/> under where it says { /* Change code below this line / }

const Fruits = () => {
return (


{ /* Change code below this line / }


{ /
Change code above this line */ }

);
};
не работает
странно но когда я копирую код не добовляется почему то,вопрос почему?

You are putting the element in the Component like this:

const Fruits = () => {
return (

{ /* Change code below this line / }
<TypesOfFruit />
{ / Change code above this line */ }

);
};

NOTE: This is blurred because it contains a possible solution to the code.