Render a Class Component to the DOM - Citrus and noncitrus show but are not checked as valid saying "The Fruits component should return the NonCitrus component and the Citrus component."

JavaScript
1

When I run the solution, everything has a green check except for the fact that the fruit component doesn’t return the Citrus and NonCitrus components. However, I see in the output to the right it’s clearly there. Is there a particular way it wants me to write this that it thinks it better solves the solution or something? I’m not sure what’s wrong.


class TypesOfFood extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <h1>Types of Food:</h1>
        {/* change code below this line */}
          <Fruits />
          <Vegetables />
        {/* change code above this line */}
      </div>
    );
  }
};

// change code below this line
var node = document.getElementById("challenge-node");
ReactDOM.render(<TypesOfFood />, node);

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0.

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

2

It passes for me. It’s probably a browser issue. Try reloading the page, try in a different browser, clear the browser cache, reboot computer, etc.

4

Yep yep, looks like a cache issue. Thanks for confirming it works!

1 Like