Nesting react components

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 (
  <div>
    { /* change code below this line */ }
<app>
<TypesOfFruit/>
</app>
    { /* 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 */ }
  <app>
      <Fruits/>
  </app>
      { /* change code above this line */ }
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/77.0.3865.120 Safari/537.36.

Challenge: Use React to Render Nested Components

Link to the challenge:
https://www.freecodecamp.org/learn/front-end-libraries/react/use-react-to-render-nested-components

You’ve added extra <app> & <app/> tags which are not required.

1 Like

I’ve already got it.
any way, thank you for your valuable replay.
:wink: