<commit_before>---
published: true
hidden: true
title: "A deep dive into children in React"
---

TK introduction

Let's say we have a `<Grid />` component which can contain as many instances of the `<Row />` component as we want. For example to render three rows one would do:

```html
<Grid>
  <Row />
  <Row />
  <Row />
</Grid>
```

<figure>
  <a target="_blank" href="http://www.webpackbin.com/Ekg_vyjPz">
    <img alt="The rendered components, one Grid containing three rows" src="/img/react-children-grid-row.png" />
    <figcaption><a target="_blank" href="http://www.webpackbin.com/Ekg_vyjPz">(Live demo)</a></figcaption>
  </a>
</figure>

These three `Row` components are passed to the `Grid` component as `props.children`. Using an _expression container_ (that's the technical term for those squiggly brackets in JSX) parents can render their children:

```javascript
class Grid extends React.Component {
  render() {
    return <div>{this.props.children}</div>
  }
}
```

Parents can also decide not to render any children or to manipulate them before rendering. For example, this `<Fullstop />` component does not render its children at all:

```javascript
class Fullstop extends React.Component {
  render() {
    return <h1>Hello world!</h1>
  }
}
```

No matter which children you pass to this component, it will always show "Hello world!" and nothing else. Full stop.

> Note: The `<h1>` in the example above (much like all the HTML primitives) does render its children, in this case 'Hello World!'.

## Everything can be a child

Children in React don't have to be components, they can be anything. For example, we can pass our `<Grid />` component from above some text as children and it'll work perfectly fine:

```html
<Grid>Hello world!</Grid>
```

<figure>
  <a target="_blank" href="http://www.webpackbin.com/N1FUPocvz">
    <img alt="The grid component rendering 'Hello world!'" src="/img/react-children-grid-string.png" />
    <figcaption><a target="_blank" href="http://www.webpackbin.com/N1FUPocvz">(Live demo)</a></figcaption>
  </a>
</figure>

JSX will automatically remove whitespace on the beginning and ending of a line as well as blank lines. It also condenses blank lines in the middle of string literals into one space.

This means all of these examples will render the same thing:

```html
<Grid>Hello world!</Grid>

<Grid>
  Hello world!
</Grid>

<Grid>
  Hello
  world!
</Grid>

<Grid>

  Hello world!
</Grid>
```

You can also mix and match multiple types of children perfectly fine:

```html
<Grid>
  Here is a row:
  <Row />
  Here is another row:
  <Row />
</Grid>
```

<figure>
  <a target="_blank" href="http://www.webpackbin.com/E1IpLQ3PM">
    <img alt="The grid component rendering two rows and some text" src="/img/react-children-grid-mixed.png" />
    <figcaption><a target="_blank" href="http://www.webpackbin.com/E1IpLQ3PM">(Live demo)</a></figcaption>
  </a>
</figure>

### Functions as children

We can pass any JavaScript expression as children. This includes functions.

To illustrate what that would look like, this is a component which executes a function passed to it as a child:

```javascript
class Executioner extends React.Component {
  render() {
    // See how we're calling the child as a function?
    //                        ↓
    return this.props.children()
  }
}
```

You'd use this component like so:

```javascript
<Executioner>
  {() => <h1>Hello World!</h1>}
</Executioner>
```

This specific example isn't useful, of course, but it shows the idea.

Imagine you had to fetch some data from a server. You could do this in a variety of ways, but it's possible with this function-as-a-child pattern:

```javascript
<Fetch url="api.myself.com">
  {(result) => <p>{result}</p>}
</Fetch>
```

Spend a minute to play around with [this bin](http://www.webpackbin.com/NymfRpcwf) and see if you can figure out how to make this work. ([here](http://www.webpackbin.com/NkoIz1owG) is my go at it)

Don't worry if this is over your head. All I want is that you're not surprised when you see this in the wild. With children, anything goes.

## Manipulating children

If you take a look at the React docs you will see it says that "children are an _opaque data structure_". What they are essentially telling us that `props.children` might be an array or or maybe a function or maybe an object or maybe… Since you can pass anything, you can never know for sure.

React provides a bunch of helper functions to make manipulating children easy and without trouble. These are available at `React.Children`.

### Looping over children

The two most obvious helpers are `React.Children.map` and `React.Children.forEach`. They work exactly like their array counterparts, except they also work when a function, object or anything is passed as children.

```javascript
class IgnoreFirstChild extends React.Component {
  render() {
    const children = this.props.children
    return (
      <div>
        {React.Children.map(children, (child, i) => {
          // Ignore the first child
          if (i < 1) return
          return child
        })}
      </div>
    )
  }
}
```

The `<IgnoreFirstChild />` component here maps over all its children, ignoring the first child and returning all the others.

```javascript
<IgnoreFirstChild>
  <h1>First</h1>
  <h1>Second</h1> // <- Only this is rendered
</IgnoreFirstChild>
```

<figure>
  <a target="_blank" href="http://www.webpackbin.com/NyfgFQ2wz">
    <img alt="Some text saying 'Second'" src="/img/react-children-map.png" />
    <figcaption><a target="_blank" href="http://www.webpackbin.com/NyfgFQ2wz">(Live demo)</a></figcaption>
  </a>
</figure>

In this case, we could've also used `this.props.children.map`. But what would've happened if somebody passed a function as a child? `this.props.children` would've been a function instead of an array, and we would've had an error! 😱

![TypeError: this.props.children.map is not a function](/img/react-children-error.png)

With the `React.Children.map` function though, this is no problem whatsoever:

```javascript
<IgnoreFirstChild>
  {() => <h1>First</h1>} // <- Ignored 💪
</IgnoreFirstChild>
```

### Counting the children

Since `this.props.children` might be anything from an array over a string to a function, checking how _many_ children we got turns out to be rather hard! Naïvely doing `this.props.children.length` would break when passed a String or a function. We'd have one child, `"Hello World!"`, but the `.length` would be reported as `12` instead!

That's why we have `React.Children.count`:

```javascript
class ChildrenCounter extends React.Component {
  render() {
    return <p>React.Children.count(this.props.children)</p>
  }
}
```

It returns the number of children no matter what type they are:

```javascript
// Renders "1"
<ChildrenCounter>
  Second!
</ChildrenCounter>

// Renders "2"
<ChildrenCounter>
  <p>First</p>
  <ChildComponent />
</ChildrenCounter>

// Renders "3"
<ChildrenCounter>
  {() => <h1>First!</h1>}
  Second!
  <p>Third!</p>
</ChildrenCounter>
```

### Enforcing a single child

If you think back to our `<Executioner />` component above, it expects only a single child to be passed, which has to be a function.

```javascript
class Executioner extends React.Component {
  render() {
    return this.props.children()
  }
}
```

We could try to enforce this with `propTypes`, which would look something like this:

```javascript
Executioner.propTypes = {
  children: React.PropTypes.func.isRequired,
}
```

That would log a message to the console though, something developers could ignore. Instead, we can use `React.Children.only` inside our `render` method!

```javascript
class Executioner extends React.Component {
  render() {
    return React.Children.only(this.props.children)()
  }
}
```

This returns the only child in `this.props.children`. If there is more than one child, it throws an error, thusly grinding the entire app to a halt—perfect to avoid lazy devs trying to mess with our component. 😎

### Converting children to an array

As a last resort, if none of the above methods fit your need, you can convert your children to an array with `React.Children.toArray`. This would be useful if you needed to e.g. sort them:

```javascript
class Sort extends React.Component {
  render() {
    const children = React.Children.toArray(this.props.children)
    // Sort and render the children
    return <p>{children.sort().join(' ')}</p>
  }
}
```

```javascript
<Sort>
  // We use expression containers to make sure our strings
  // are passed as three children, not as one string
  {'bananas'}{'oranges'}{'apples'}
</Sort>
```

The above example would render "apples bananas oranges".

<figure>
  <a target="_blank" href="http://www.webpackbin.com/NyE2TQhwz">
    <img alt="apples bananas oranges" src="/img/react-children-apples-bananas-oranges.png" />
    <figcaption><a target="_blank" href="http://www.webpackbin.com/NyE2TQhwz">(Live demo)</a></figcaption>
  </a>
</figure><commit_msg>Tiny cleanup<commit_after>---
published: true
hidden: true
title: "A deep dive into children in React"
---

TK introduction

Let's say we have a `<Grid />` component which can contain `<Row />` components. You'd use it like so:

```html
<Grid>
  <Row />
  <Row />
  <Row />
</Grid>
```

<figure>
  <a target="_blank" href="http://www.webpackbin.com/Ekg_vyjPz">
    <img alt="The rendered components, one Grid containing three rows" src="/img/react-children-grid-row.png" />
    <figcaption><a target="_blank" href="http://www.webpackbin.com/Ekg_vyjPz">(Live demo)</a></figcaption>
  </a>
</figure>

These three `Row` components are passed to the `Grid` component as `props.children`. Using an _expression container_ (that's the technical term for those squiggly brackets in JSX) parents can render their children:

```javascript
class Grid extends React.Component {
  render() {
    return <div>{this.props.children}</div>
  }
}
```

Parents can also decide not to render any children or to manipulate them before rendering. For example, this `<Fullstop />` component does not render its children at all:

```javascript
class Fullstop extends React.Component {
  render() {
    return <h1>Hello world!</h1>
  }
}
```

No matter which children you pass to this component, it will always show "Hello world!" and nothing else. Full stop.

> Note: The `<h1>` in the example above (much like all the HTML primitives) does render its children, in this case 'Hello World!'.

## Everything can be a child

Children in React don't have to be components, they can be anything. For example, we can pass our `<Grid />` component from above some text as children and it'll work perfectly fine:

```html
<Grid>Hello world!</Grid>
```

<figure>
  <a target="_blank" href="http://www.webpackbin.com/N1FUPocvz">
    <img alt="The grid component rendering 'Hello world!'" src="/img/react-children-grid-string.png" />
    <figcaption><a target="_blank" href="http://www.webpackbin.com/N1FUPocvz">(Live demo)</a></figcaption>
  </a>
</figure>

JSX will automatically remove whitespace on the beginning and ending of a line as well as blank lines. It also condenses blank lines in the middle of string literals into one space.

This means all of these examples will render the same thing:

```html
<Grid>Hello world!</Grid>

<Grid>
  Hello world!
</Grid>

<Grid>
  Hello
  world!
</Grid>

<Grid>

  Hello world!
</Grid>
```

You can also mix and match multiple types of children perfectly fine:

```html
<Grid>
  Here is a row:
  <Row />
  Here is another row:
  <Row />
</Grid>
```

<figure>
  <a target="_blank" href="http://www.webpackbin.com/E1IpLQ3PM">
    <img alt="The grid component rendering two rows and some text" src="/img/react-children-grid-mixed.png" />
    <figcaption><a target="_blank" href="http://www.webpackbin.com/E1IpLQ3PM">(Live demo)</a></figcaption>
  </a>
</figure>

### Functions as children

We can pass any JavaScript expression as children. This includes functions.

To illustrate what that would look like, this is a component which executes a function passed to it as a child:

```javascript
class Executioner extends React.Component {
  render() {
    // See how we're calling the child as a function?
    //                        ↓
    return this.props.children()
  }
}
```

You'd use this component like so:

```javascript
<Executioner>
  {() => <h1>Hello World!</h1>}
</Executioner>
```

This specific example isn't useful, of course, but it shows the idea.

Imagine you had to fetch some data from a server. You could do this in a variety of ways, but it's possible with this function-as-a-child pattern:

```javascript
<Fetch url="api.myself.com">
  {(result) => <p>{result}</p>}
</Fetch>
```

Spend a minute to play around with [this bin](http://www.webpackbin.com/NymfRpcwf) and see if you can figure out how to make this work. ([here](http://www.webpackbin.com/NkoIz1owG) is my go at it)

Don't worry if this is over your head. All I want is that you're not surprised when you see this in the wild. With children, anything goes.

## Manipulating children

If you take a look at the React docs you will see it says that "children are an _opaque data structure_". What they are essentially telling us that `props.children` might be an array or or maybe a function or maybe an object or maybe… Since you can pass anything, you can never know for sure.

React provides a bunch of helper functions to make manipulating children easy and without trouble. These are available at `React.Children`.

### Looping over children

The two most obvious helpers are `React.Children.map` and `React.Children.forEach`. They work exactly like their array counterparts, except they also work when a function, object or anything is passed as children.

```javascript
class IgnoreFirstChild extends React.Component {
  render() {
    const children = this.props.children
    return (
      <div>
        {React.Children.map(children, (child, i) => {
          // Ignore the first child
          if (i < 1) return
          return child
        })}
      </div>
    )
  }
}
```

The `<IgnoreFirstChild />` component here maps over all its children, ignoring the first child and returning all the others.

```javascript
<IgnoreFirstChild>
  <h1>First</h1>
  <h1>Second</h1> // <- Only this is rendered
</IgnoreFirstChild>
```

<figure>
  <a target="_blank" href="http://www.webpackbin.com/NyfgFQ2wz">
    <img alt="Some text saying 'Second'" src="/img/react-children-map.png" />
    <figcaption><a target="_blank" href="http://www.webpackbin.com/NyfgFQ2wz">(Live demo)</a></figcaption>
  </a>
</figure>

In this case, we could've also used `this.props.children.map`. But what would've happened if somebody passed a function as a child? `this.props.children` would've been a function instead of an array, and we would've had an error! 😱

![TypeError: this.props.children.map is not a function](/img/react-children-error.png)

With the `React.Children.map` function though, this is no problem whatsoever:

```javascript
<IgnoreFirstChild>
  {() => <h1>First</h1>} // <- Ignored 💪
</IgnoreFirstChild>
```

### Counting the children

Since `this.props.children` might be anything from an array over a string to a function, checking how _many_ children we got turns out to be rather hard! Naïvely doing `this.props.children.length` would break when passed a String or a function. We'd have one child, `"Hello World!"`, but the `.length` would be reported as `12` instead!

That's why we have `React.Children.count`:

```javascript
class ChildrenCounter extends React.Component {
  render() {
    return <p>React.Children.count(this.props.children)</p>
  }
}
```

It returns the number of children no matter what type they are:

```javascript
// Renders "1"
<ChildrenCounter>
  Second!
</ChildrenCounter>

// Renders "2"
<ChildrenCounter>
  <p>First</p>
  <ChildComponent />
</ChildrenCounter>

// Renders "3"
<ChildrenCounter>
  {() => <h1>First!</h1>}
  Second!
  <p>Third!</p>
</ChildrenCounter>
```

### Enforcing a single child

If you think back to our `<Executioner />` component above, it expects only a single child to be passed, which has to be a function.

```javascript
class Executioner extends React.Component {
  render() {
    return this.props.children()
  }
}
```

We could try to enforce this with `propTypes`, which would look something like this:

```javascript
Executioner.propTypes = {
  children: React.PropTypes.func.isRequired,
}
```

That would log a message to the console though, something developers could ignore. Instead, we can use `React.Children.only` inside our `render` method!

```javascript
class Executioner extends React.Component {
  render() {
    return React.Children.only(this.props.children)()
  }
}
```

This returns the only child in `this.props.children`. If there is more than one child, it throws an error, thusly grinding the entire app to a halt—perfect to avoid lazy devs trying to mess with our component. 😎

### Converting children to an array

As a last resort, if none of the above methods fit your need, you can convert your children to an array with `React.Children.toArray`. This would be useful if you needed to e.g. sort them:

```javascript
class Sort extends React.Component {
  render() {
    const children = React.Children.toArray(this.props.children)
    // Sort and render the children
    return <p>{children.sort().join(' ')}</p>
  }
}
```

```javascript
<Sort>
  // We use expression containers to make sure our strings
  // are passed as three children, not as one string
  {'bananas'}{'oranges'}{'apples'}
</Sort>
```

The above example would render "apples bananas oranges".

<figure>
  <a target="_blank" href="http://www.webpackbin.com/NyE2TQhwz">
    <img alt="apples bananas oranges" src="/img/react-children-apples-bananas-oranges.png" />
    <figcaption><a target="_blank" href="http://www.webpackbin.com/NyE2TQhwz">(Live demo)</a></figcaption>
  </a>
</figure>

## Editing children
{'fraction_non_alphanumeric': 0.12289787281434458, 'fraction_numerical': 0.003341129301703976, 'mean_word_length': 3.9365035733919735, 'pattern_counts': {'":': 0, '<': 237, '<?xml version=': 0, '>': 243, 'https://': 0, 'lorem ipsum': 0, 'www.': 24, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6709741', 'n_tokens_mistral': 5516, 'n_tokens_neox': 5354, 'n_words': 2126}