diff --git a/cookbook/07-children-prop-type.md b/cookbook/07-children-prop-type.md index 4ce5ec747..c22699ed9 100644 --- a/cookbook/07-children-prop-type.md +++ b/cookbook/07-children-prop-type.md @@ -7,6 +7,41 @@ prev: style-prop-value-px.html next: controlled-input-null-value.html --- -Usually, a component's `this.props.children` is an array of components. To save an extra array allocation, it returns the component itself when there's only one. +Usually, a component's `this.props.children` is an array of components: -This means accessing, for example, `this.props.children.length` might be misleading, as it could either be the `length` property of the array of children, or that of a single string component. +```js +/** @jsx React.DOM */ + +var GenericWrapper = React.createClass({ + componentDidMount: function() { + console.log(Array.isArray(this.props.children)); // => true + }, + render: function() { + return
; + } +}); + +React.renderComponent( + , + mountNode +); +``` + +To save an extra array allocation, it returns the component itself _without the array wrapper_ when there's only one child. + +```js +/** @jsx React.DOM */ + +var GenericWrapper = React.createClass({ + componentDidMount: function() { + // **warning**: yields 5 for length of the string 'hello', not 1 for the + // length of the non-existant array wrapper! + console.log(this.props.children.length); + }, + render: function() { + return
; + } +}); + +React.renderComponent(hello, mountNode); +```