So why exactly does the Fruits component not show at the start of the challenge in the browser?

JavaScript
1

My question is that at the start of the code we’re giving these components. TypesOfFood displays on our built in browser but Fruits does not despite their similar look/build. What exactly is the difference that causes TypesOfFood to show but not the Fruits component?

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 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.111 Safari/537.36.

Challenge: Compose React Components

Link to the challenge:

2

Because the component being rendered by the React DOM library is TypesOfFruit. React renders things as a tree, so you have a top level component which normally includes some other components, and they then normally include some other components, and so on.

In this case, you haven’t added the Fruits component to the TypesOfFruit component, so nothing happens.

You can define as many components as you want, it is only when they are included in a component that is being rendered that they themselves will be rendered.

1 Like