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>
    );
  }
}

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

import Child from './Child.js';

class Parent extends React.Component {
  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>

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

      </div>
    );
  }
}

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

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

      </div>
    );
  }
}

<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>
    );
  }
}

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

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

<Parent>
  <Child />
</Parent>

<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) }
  }
}