[Proposal] Add component properties like children

[adrielcodeco]

I propose to add support to custom child properties. This expand the options to create and organize the components and can reduce the amount of components in some cases.

Current Behavior

const MyComponent = (props) => {
  const { header, body, footer } = props
  return (
    <div>
      <div>{header}</div>
      <div>{body}</div>
      <div>{footer}</div>
    </div>
  )
}

const Page = () =>
  <MyComponent
    header={
      <div>
        <Brand>My Brand</Brand>
        <Menu>
          <MenuItem>Item 1</MenuItem>
          <MenuItem>Item 2</MenuItem>
          <MenuItem>Item 3</MenuItem>
          <MenuItem>Item 4</MenuItem>
        </Menu>
        <UserName>Codeco</UserName>
        <SignOutButton />
      <div>
    }
    body={
      <div>
        <p>My content 1</p>
        <p>My content 2</p>
        <p>My content 3</p>
        <p>My content 4</p>
        <p>My content 5</p>
        <p>My content 6</p>
        <p>My content 7</p>
        <p>My content 8</p>
        <p>My content 9</p>
      </div>
    }
    footer={
      <div>
        <b>codeco</b>
        <b>proposal</b>
        <b>2022</b>
      </div>
    }
  />

Desired Behavior

const MyComponent = (props) => {
  const { header, body, footer } = props
  return (
    <div>
      <div>{header}</div>
      <div>{body}</div>
      <div>{footer}</div>
    </div>
  )
}

const Page = () =>
  <MyComponent>
    <MyComponent.header>
      <div>
        <Brand>My Brand</Brand>
        <Menu>
          <MenuItem>Item 1</MenuItem>
          <MenuItem>Item 2</MenuItem>
          <MenuItem>Item 3</MenuItem>
          <MenuItem>Item 4</MenuItem>
        </Menu>
        <UserName>Codeco</UserName>
        <SignOutButton />
      <div>
    </MyComponent.header>
    <MyComponent.body>
      <div>
        <p>My content 1</p>
        <p>My content 2</p>
        <p>My content 3</p>
        <p>My content 4</p>
        <p>My content 5</p>
        <p>My content 6</p>
        <p>My content 7</p>
        <p>My content 8</p>
        <p>My content 9</p>
      </div>
    </MyComponent.body>
    <MyComponent.footer>
      <div>
        <b>codeco</b>
        <b>proposal</b>
        <b>2022</b>
      </div>
    </MyComponent.footer>
  </MyComponent>

This example above expand the options to create and organize the components.

To use a real case...

Some developers make their codes like this:

<Card variant="outlined">
  <CardContent>
    <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
      Word of the Day
    </Typography>
    <Typography variant="h5" component="div">
      be{bull}nev{bull}o{bull}lent
    </Typography>
    <Typography sx={{ mb: 1.5 }} color="text.secondary">
      adjective
    </Typography>
    <Typography variant="body2">
      well meaning and kindly.
      <br />
      {'"a benevolent smile"'}
    </Typography>
  </CardContent>
  <CardActions>
    <Button size="small">Learn More</Button>
  </CardActions>
</Card>

... creating two components (CardContent and CardActions) to direct the content...

(this example was copied from https://mui.com/pt/material-ui/react-card/#OutlinedCard.tsx and changed to simplify)

... but imagine doing something like this:

<Card variant="outlined">
  <Card.Content>
    <Typography sx={{ fontSize: 14 }} color="text.secondary" gutterBottom>
      Word of the Day
    </Typography>
    <Typography variant="h5" component="div">
      be{bull}nev{bull}o{bull}lent
    </Typography>
    <Typography sx={{ mb: 1.5 }} color="text.secondary">
      adjective
    </Typography>
    <Typography variant="body2">
      well meaning and kindly.
      <br />
      {'"a benevolent smile"'}
    </Typography>
  </Card.Content>
  <Card.Actions>
    <Button size="small">Learn More</Button>
  </Card.Actions>
</Card>

eliminating the need to create more components, reducing the amount of components on the page.

So, adding support to use the components properties, like header; body and footer from MyComponent in my example, as a children make possible this behaviors.

make sense?

[zJaaal]

You can actually do this using Compound Components Design Pattern. There you have an small guide of how to implement it.

That's one way to do it.

You can use the Children to manipulate the children in your component and the cloneElement to change the props on every child

Here is an example of an If/Else component (this pattern is not a good approach of how to do this. Is just for educational purposes):

import { Children, cloneElement } from "react";

const If = ({ children, predicate }) => {
  return Children.map(children, (child) => {
    return cloneElement(child, { predicate });
  });
};

const Then = ({ children, predicate }) => {
  return predicate ? <>{children}</> : <></>;
};

const Else = ({ children, predicate }) => {
  return !predicate ? <>{children}</> : <></>;
};

If.then = Then;
If.else = Else;

export default If;

Look how I created two properties on the main component and assigned the proper component to it, so now you can just do something like:

import If from "./components/If";
import { useState } from "react";

function App() {
  const [random, setRandom] = useState(Math.random() * 100);
  return (
    <div
      style={{ display: "flex", height: "inherit", flexDirection: "column" }}
    >
      <If predicate={random <= 50}>
        <If.then>
          <p style={{ color: random < 40 ? "blue" : "red" }}>I'm {random}</p>
        </If.then>
        <If.else>
          <div>
            <p style={{ color: random > 80 ? "green" : "violet" }}>
              I'm {random}
            </p>
            <button onClick={() => setRandom(0)}>Reset</button>
          </div>
        </If.else>
      </If>
      <button
        onClick={() => setRandom(Math.random() * 100)}
        style={{ width: "50%" }}
      >
        Randomize
      </button>
    </div>
  );
}

export default App;

In that snippet I made the implementation where I just generate random numbers and if is equal or less than 50 I just render "I'm 34" (In case that random is 34). In other ways I render the same message but with a button to reset the random number to 0.

I actually have this code with more components like Switch or a Counter using Compound Components Pattern in a public repository. I'll drop it right here

Hope you find this helpful.

Kindest Regards,

zJaaal

[adrielcodeco]

Very good, it is cool, but this way is more visual than functional. It is a way to make the code prettier, but we still need to create some components and it doesn't cover the need to direct the component to a specific position in the parent. I think the proposal is still relevant.

[nihgwu]

What about reactjs/rfcs#223

[adrielcodeco]

It works the same way. very nice @nihgwu. It solves the problem with another approach.

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[github-actions]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!