# The React Named Children Pattern

## Composition

One of the key concepts of React development is composition

Composition is all about making BigThings by combining many SmallThings together.

Let’s look at a few ways to do this.

## The Children Pattern

The simplest technique we have is **The Children Pattern**. It is the first pattern you learn in the [React documentation](https://reactjs.org/docs/introducing-jsx.html).

If we wanted to render the text `Hello World` inside of a `<Card>` component we would like do it this way:

```JavaScripts
<Card>Hello World</Card>
```

The Children Pattern is about displaying content, but sometimes there are other messages we want to send our component. 

If we're looking to make our `<Card>` component larger, we might tell it that via the `size` prop. 

```javascript
<Card size="large">Hello World</Card>
```

This pattern works if `<Card>` has just one content section but not if it has many. 

## The Props-Children Pattern

When we have many children, **The Props-Children Pattern** can be useful. 

Instead of passing our text in via `children` we pass it as a `prop`:

```javascript
<Card
  size="large"
  
  title="Hello World"
  subtitle="This is a basic example"
  body="Here is where a lot more text would go."
/>
```

Unfortunately this makes unfamiliar components harder to understand since **its props might set its appearance *OR* its content**. 

It also becomes super ugly when the content is not just plain text:

```javascript
<Card
  size="large"
  title="Hello World"
  subtitle={
    <>
      This is a basic <strong>example</strong>
    </>
  }
  body="Here is where a lot more text would go."
/>
```

## The Named Children Pattern

The _Named Children_ pattern helps with both the mixing of concerns and (subjectively) the ugliness. 

React's `children` does not need to be a component or even a string, it can be a Plain Old Javascript Object. Because of this we pass `children` an object that maps section names too different content. 

```javascript
<Card size="large">
{{
  title: "Hello World"
  subtitle: <>This is a basic <strong>example</strong></>
  body: "Here is where a lot more text would go."
}}
</Card>
```
This approach separates content from config making it easier to know whether the prop is for changing its appearance or its content. 

## Implementing the Named Children Pattern

The Named Children Pattern must be hard to implement, right?

Nope! Although `children` are set differently *outside* of the component, *inside* they're treated like any other prop:

```javascript
function Card({ size = "medium", children }) {
  return (
    <div className={size}>
      <h2>{children.title}</h2>
      <h3>{children.subtitle}</h3>
      <p>{children.body</p>
    </div>
  )
}
```

The _Named Children_ pattern is a promising approach to [separating concerns](https://en.wikipedia.org/wiki/Separation_of_concerns) in React Components making them easier to read and easier to change.