Where is the Fruits?

JavaScript
1

Tell us what’s happening:
Hi,

can someone tell me why and how when we open the page of this challenge only the class Types of Food is represented (visible) on the console panel and class Fruits is not.

I understood that the method render() is used to represent (show) the component and the code for the two classes seems to me identical but only Types of Food is actually rendered on screen.

Cheers

Your code so far


class Fruits extends React.Component {
constructor(props) {
  super(props);
}
render() {
  return (
    <div>
      <h2>Fruits:</h2>
      { /* change code below this line */ }

      { /* 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 */ }

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

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36.

Challenge: Compose React Components

Link to the challenge:

2

Because it’s rendered to the browser using a library called ReactDOM. The code there is just two components written using the React library. The second one is the one that is being rendered with ReactDOM – the call to that isn’t shown because it isn’t part of the lesson. Same as HTML DOM you have one root node, which has children, ReactDOM renders a root node which has children. React isn’t tied to just browsers (it can render to Android or IOS or Windows, or to a browser, or to a Canvas element in a browser, using different libraries, ReactDOM is the one used for just rendering to a browser)