Component Children

this.props.children

Children allow you to pass components as data to other components, just like any other prop you use. The special thing about children is that React provides support through its ReactElement API and JSX. XML children translate perfectly to React children.

var MyDiv = React.createClass({
  render: function(){
      return <div>{this.props.children}</div>
}
});

ReactDOM.render(
  <MyDiv>
      <span>Hello</span>
      <span>World</span>
  </MyDiv>,
  node  
);
`</pre>

### this.props.children

If you look at the **JSX** transform, you'll find that XML children are appended as arguments to the _React.createElement_ call.
 Most often, your component will render content and include the children in the _render_ output. This is a great way to create UI components, like cards, headers, and buttons.

Occasionally, you may want to interact with the children, maybe mutating or separating them. Be careful here and remember to treat **this.props.children** as an **opaque data structure**. Instead of working with **this.props.children** directly, use the **React.Children** utilities to work with children.

<pre>`var ListComponent = React.createClasss({
  render: function(){
      var children = React.Children.map(
        this.props.children,
        function(child){
            return &lt;li&gt;{child}&lt;li&gt;
        }
    );
    return &lt;ul&gt;{children}&lt;/ul&gt;;
  }
  });

  var middleChildren = [
  &lt;strong key='2'&gt;Child 2&lt;/strong&gt;,
  &lt;a href='#' key='3'&gt;Child 3&lt;/a&gt;
  ];

  ReactDOM.render(
  &lt;ListComponent&gt;
    &lt;span&gt;Child 1&lt;/span&gt;
    {middleChildren}
    &lt;em&gt;Child 4&lt;/em&gt;
  &lt;/ListComponent&gt;,
  document.body
);