Rendering a Class Component to the DOM - test didn't pass

JavaScript
1

The final test says: The TypesOfFood component should render to the DOM within the div with the id challenge-node . I need help, regrads. Th ecode is below:

class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div id='challenge-node'>
        <h1>Types of Food:</h1>
        { /* change code below this line */ }
          <Fruits />
          <Vegetables />
        
      </div>
    );
  }
};

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

const Vegetables = () => {
  return (
    <div>
      { /* change code below this line */ }
        <TypesOfVegetable />
      { /* change code above this line */ }
    </div>
  );
};

const TypesOfFruit = () => {
  return (
    <div>
      <h2>Fruits:</h2>
      <NonCitrus />
      <Citrus />
    </div>
  );
};

const NonCitrus = () => {
  return (
    <div>
      <h2>NonCitrus:</h2>
      <li>Apples</li>
      <li>Blueberries</li>
      <li>Strawberries</li>
      <li>Bananas</li>
    </div>
  );
};

const Citrus = () => {
  return (
    <div>
      <h2>Citrus:</h2>
      <li>Lemon</li>
      <li>Lime</li>
      <li>Orange</li>
      <li>Grapefruit</li>
    </div>
  );
};
const TypesOfVegetable = () => {
  return (
    <div>
      <h2>Vegetables:</h2>
      <ul>
        <li>Brussel Sprouts</li>
        <li>Broccoli</li>
        <li>Squash</li>
        <li>Fasulye</li>
      </ul>
    </div>
  );
};

class TypesOfVehicles extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
          <div>
          <h1>Types of Vehicles:</h1>         
          <Car />
          </div>
        );
    }
}

const Car = () => {
  return (
    <div>
      { /* change code below this line */ }
        <TypesOfCars />
      { /* change code above this line */ }
    </div>
  );
};

const TypesOfCars = () => {
  return (
    <div>
      <h2>Cars:</h2>
      <ul>
        <li>Renault</li>
        <li>Nissan</li>        
      </ul>
    </div>
  );
};

ReactDOM.render(<TypesOfFood />,document.getElementById('challenge-node'));
2

Can you paste the url to the challenge here? that would help

3

https://learn.freecodecamp.org/front-end-libraries/react/render-a-class-component-to-the-dom

4

I am a bit confused. Has the code you pasted anything to do with the challenge? :frowning_man:

You were simple asked to


class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        {/* change code below this line */}
         // ---> Both the Fruits and Vegetables should be returned here. They have already been defined
        {/* change code above this line */}
      </div>
    );
  }
};

// change code below this line
//  ----> render TypesOfFood to the DOM. There is a div with id='challenge-node'available for you to use

It’s 3 lines of code

5

Yes. Since I did’t pass this chalange, I tried the codes of the previous chalanges.

6

That will not work. Just add the two child-components under the <h1>Types of Food:</h1>
and render TypesOfFood to the DOM

7

Thanks, I’ll do that.