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."

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) {
  render() {
    return (
        <h1>Types of Food:</h1>
        {/* change code below this line */}
          <Fruits />
          <Vegetables />
        {/* change code above this line */}

// 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:

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.

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

1 Like