React / Why the props are not in the parent tag?-CodePudding

Hello

I am trying to understand how React passes props informations from parent to child.

In this

Therefore the props can be accessed in the grid component.

CodePudding user response：

<Grid> has no props, and children are translated to children prop, so it cannot be expected that Grid props contain palette. {...props} results in Grid being rendered as:

<div className="grid">
  <Palettes palettes={palettes} />
</div>

CodePudding user response：

The example that doesnt work is setting props.palettes to the Grid component, which does nothing with it but palettes are expected in exact Palettes component. And they are not passed in your not working example.

Grid component can be represented in multiple ways, they are all equivalent, maybe that will help you to understand better what is happening.

Added someOtherProp for example purposes

<div className="app">
  <Grid someOtherProp="123">
    <Palettes palettes={palettes} />
  </Grid>
</div>

And 3 equivalents of Grid component:

const Grid = (props) => {
  return <div className="grid" {...props} />;
};

const Grid = ({ children, ...restProps }) => {
  console.log(children.type, children.props);
  // ƒ Palettes() {}, {palettes: Array(18)}

  console.log(restProps);
  // {someOtherProp: "123"}
  return <div className="grid" children={children} {...restProps} />;
};

const Grid = ({ children, ...restProps }) => {
  return (
    <div className="grid" {...restProps}>
      {children}
    </div>
  );
};

As you can see, Grid component has its own props, and the children component also has its own props. So if you move <Grid palettes={palettes}> you just move palletes to Grid in same way as someOtherProp and Grid has nothig to do with them. But <Palettes> will miss them now.

CodePudding user response：

From what I see, it is the Palettes component that takes care of displaying each color palette.

The Grid component is just there to display the palettes in a certain way

Also , what I notice is that the props in the Grid component are useless in my opinion