Stas Gavrylov

@stasgavrylov

Frontend Engineer @ Rails Reactor

this.props.children

import React from 'react';
import Child from './Child.js';
import Parent from './Parent.js';

export default class Container extends React.Component {
  render() {
    return (
      <Parent>
        <Child />
        <Child />
        <Child />
      </Parent>
    );
  }
}

Simplest Example

class Parent extends React.Component {
  render() {
    return (
      <div className="parent">
        { this.props.children }
      </div>
    );
  }
}


  render() {
    return (
      <div className="parent">
        <p>No children here.</p>
      </div>
    );
  }

class Parent extends React.Component {
  render() {
    return (
      <div className="parent">
        <p>No children here.</p>
      </div>
    );
  }
}

class Parent extends React.Component {
  render() {
    return (
      <div className="parent">

        No children        
        here.
      </div>
    );
  }
}

export default Parent;


  render() {
    return (
      <div className="parent">

        No children        
        here.
      </div>
    );
  }

import Child from './Child.js';

class Parent extends React.Component {
  render() {
    return (
      <div className="parent">
        Primitive
        <Child />
        { this.props.children }
      </div>
    );
  }
}




  render() {
    return (
      <div className="parent">
        Primitive
        <Child />
        { this.props.children }
      </div>
    );
  }

<Parent>
  { () => <p>I am a function.</p> }
</Parent>

class Parent extends React.Component {
  render() {
    return (
      <div className="parent">
        { this.props.children() }
      </div>
    );
  }
}

<Parent>
  { () => <p>I am a function.</p> }
</Parent>


  render() {
    return (
      <div className="parent">
        { this.props.children() }
      </div>
    );
  }

React.Children

```
map()
```
```
forEach()
```
```
count()
```
```
only()
```
```
toArray()
```

<Parent>
  { () => <p>I am a function.</p> }
</Parent>

class Parent extends React.Component {
  render() {
    return (
      <div className="parent">

      </div>
    );
  }
}

<Parent>
  { () => <p>I am a function.</p> }
</Parent>


  render() {
    return (
      <div className="parent">
        { this.props.children.map(el => <p>{ el }</p>) }
      </div>
    );
  }

<Parent>
  { () => <p>I am a function.</p> }
</Parent>

class Parent extends React.Component {
  render() {
    return (
      <div className="parent">

      </div>
    );
  }
}

<Parent>
  { () => <p>I am a function.</p> }
</Parent>


  render() {
    return (
      <div className="parent">
        { React.Children.map(this.props.children, el => el) }
      </div>
    );
  }

.map()
.forEach()

<RadioGroup name="test">
  <RadioButton value="one" />
  <RadioButton value="two" />
  <RadioButton value="three" />
</RadioGroup>

render() {
  return (
    <div className="radio-group">
    { 
      React.Children.map(this.props.children, child => {
        return React.cloneElement(child, {
          name: this.props.name
        })
      }) 
    }
    </div>
  )
}

<Parent>
  { () => null }
  <Child />
</Parent>

class Parent extends React.Component {
  render() {
    return (
      <div className="parent">
        { this.props.children.length }
        { ' vs ' }
        { React.Children.count(this.props.children) }
      </div>
    );
  }
}

<Parent>
  { () => null }
  <Child />
</Parent>


  render() {
    return (
      <div className="parent">
        { this.props.children.length }
        { ' vs ' }
        { React.Children.count(this.props.children) }
      </div>
    );
  }

.count()

class Parent extends React.Component {
  render() {
    return (
      <div className="parent">
        { React.Children.only(this.props.children) }
      </div>
    );
  }
}

<Parent>
  <Child />
  <Child />
</Parent>

<Parent>
  <Child />
</Parent>


  render() {
    return (
      <div className="parent">
        { React.Children.only(this.props.children) }
      </div>
    );
  }


<Parent>
  <Child />
  <Child />
</Parent>

<Parent>
  <Child />
</Parent>

.only()

// React.Children.only expected to receive a single React element child.

<Parent>
  <Child />
</Parent>

class Parent extends React.Component {
  render() {
    return { this.props.children.map(el => el.key) }
  }
}
class Parent extends React.Component {
  render() {
    return { React.Children.toArray(this.props.children)
      .map(el => el.key) }
  }
}

<Parent>
  <Child />
</Parent>


  render() {
    return { this.props.children.map(el => el.key) }
  }


  render() {
    return { React.Children.toArray(this.props.children)
      .map(el => el.key) }
  }