React - Use React to Render Nested Components

JavaScript
1

Tell us what’s happening:

Can someone explain how did my code end up displaying the ’ Types of Food:

Fruits:

  • Apples
  • Blueberries
  • Strawberries
  • Bananas’

On the page to the right?

I dont understand the workings of this code

Your code so far

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

const Fruits = () => {
  return (
    <div>
      { /* Change code below this line */ }
<TypesOfFruit/>
      { /* 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 */ }
 <Fruits/>
        { /* Change code above this line */ }
      </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

React - Use React to Render Nested Components

2

well, though it shows exactly whats it in your component but you might want to look at how to render any list properly, have a look at their docs from react, happy reading :slight_smile: Quick Start – React

3

Sorry, I don’t understand the question. Is something not working? Or are you asking for further explanation of concept.

The code looks like working code, so I am going with this being a request for explanation.

I think the concept here is demonstrating that you have the component <Fruits /> and that acts like a relay or a middle person. It renders <TypesOfFruit /> so all you are really doing here is rendering <Fruits />, which just renders types of fruit.

It doesn’t seem very useful but this also means you can intercept also <TypesOfFruit /> now and do something like place it inside a whole other list if we wanted. I’ll leave a simple example of just a rewrite of <Fruits />.

const Fruits = () => {
  return (
    <div>
      <h2>Super Common Fruit List</h2>
      <TypesOfFruit />
    </div>
  );
}

It’s just the concept. Does that help at all?

4

Just think of components as standard JS functions (or classes).

You have two functions, one is calling the other. So the return of the TypesOfFruit function is used inside the Fruits function. Their return is rendered using JSX.

The main difference is how you “call” the functions (<someComponent />) and pass arguments to them (<someComponent name="Bob"/>).

Components are reuseable for this very reason, they are just functions (or classes) you can reuse as needed.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.