Function as Child compared to cloneElement

cloneElement.js

class MyComponent extends React.Component { 
  render() {
    return (
      <div>
        {React.cloneElement(React.Children.only(this.props.children), {
          name: 'Scuba Steve',
        })}
      </div>
    );
  }
}

MyComponent.propTypes = {
  children: React.PropTypes.node.isRequired,
};

const MyChildComponent = (props) => <img src=’/scuba-steves-picture.jpg’ alt={props.name} />

<MyComponent>
  <MyChildComponent />
</MyComponent>

functionAsChild.js

class MyComponent extends React.Component { 
  render() {
    return (
      <div>
        {this.props.children('Scuba Steve')}
      </div>
    );
  }
}

MyComponent.propTypes = {
  children: React.PropTypes.func.isRequired,
};

<MyComponent>
  {(name) => (
    <img src=’/scuba-steves-picture.jpg’ alt={name} />
  )}
</MyComponent>