Render Nested Components

Tell us what’s happening:

Hi I dont understand why I am not passing this test, I cant seem to find the error

Your code so far


const TypesOfFruit = () => {
return (
  <div>
  <h2/>
  <h1/>
    <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 */ }
<TypesOfFruit/>
    { /* 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 */ }
      <div/>
<Fruits/>

      { /* change code above this line */ }
    </div>
  );
}
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Use React to Render Nested Components

Link to the challenge:

Hey,
You added extra closing div tag in typesOfFood render

hi! you are right I deleted the div, but I am still getting an error in this

type or paste code here
const Fruits = () => {
  return (
<div>
    { /* change code below this line */
}
  <TypesOfFruit/>
    { /* change code above this line */ }
  </div>
  );
};

The Fruits component should return the TypesOfFruit component.

Thanks for the help

extra closing h2 and h1 in typesOfFruit, didn’t notice :grimacing:
you only need to add 2 lines, dont change anything else

1 Like