Doubt Compose React Components

#1 
class Fruits extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <h2>Fruits:</h2>
        { /* change code below this line */ }
<NonCitrus/>
<Citrus/>
        { /* 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 */ }
        <Vegetables />
      </div>
    );
  }
};

in this following code why is the fruits code not executed first?
the output is:

Types of Food:

Fruits:

Non-Citrus:

  • Apples
  • Blueberries
  • Strawberries
  • Bananas

Citrus:

  • Lemon
  • Lime
  • Orange
  • Grapefruit

Vegetables:

  • Brussel Sprouts
  • Broccoli
  • Squash

is only TypesOfFood getting executed because on output screen Fruits isn’t printed twice?

#2

Hi abmabhishekmishra, welcome to the FCC forums!

Do you have a link to which challenge this is? That might help me (or somebody else) figure out what is going on so we can help you out.

1 Like
#3

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

1 Like
#4

Compose React Components

#5

I don’t understand the question. What is the output you are expecting?

1 Like
#7

Class Fruits should be printed first. Then Class TypesOfFood so i was expecting class Fruits to be printed twice firstly when it was been executed and secondly when class TypesOf Food calls it. am i thinking in right order?

#8

TypesOfFood is rendered, inside it, there are two components that are rendered in order. Inside the Fruits components, there are two more components that again are rendered in order.

You can imagine the component tree like this:

<TypesOfFood>

  <Fruits>
    <NonCitrus />
	<Citrus />
  <Fruits />
  
  <Vegetables />
  
<TypesOfFood />

Here is an image of the tree from React dev tools.

component-tree
component-tree658Ă—535 15 KB

Here is a codesandbox with all the components (I think I got it right)

1 Like
#9

Functions don’t execute just because you’ve written them in the code. So it’s like you’ve written:

function Fruits () {
  // do thing
}

function TypesOfFruit () {
  Fruits();
}

The function Fruits doesn’t execute twice just because you’ve written the word twice, it only executes once, when the TypesOfFruit function is executed

1 Like
#10