diff --git a/docs/cookbook/07-children-prop-type.md b/docs/cookbook/07-children-prop-type.md index 4ce5ec7473..c22699ed90 100644 --- a/docs/cookbook/07-children-prop-type.md +++ b/docs/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); +``` diff --git a/docs/cookbook/11-dom-event-listeners.md b/docs/cookbook/11-dom-event-listeners.md index 1336953ac2..d0a89a5a2c 100644 --- a/docs/cookbook/11-dom-event-listeners.md +++ b/docs/cookbook/11-dom-event-listeners.md @@ -24,10 +24,10 @@ var Box = React.createClass({ this.setState({windowWidth: window.innerWidth}); }, componentDidMount: function() { - window.addEventListener("resize", this.handleResize); + window.addEventListener('resize', this.handleResize); }, componentWillUnmount: function() { - window.removeEventListener("resize", this.handleResize); + window.removeEventListener('resize', this.handleResize); }, render: function() { return
Current window width: {this.state.windowWidth}
; diff --git a/docs/cookbook/12-initial-ajax.md b/docs/cookbook/12-initial-ajax.md index af8676700b..700fdcd3f2 100644 --- a/docs/cookbook/12-initial-ajax.md +++ b/docs/cookbook/12-initial-ajax.md @@ -41,6 +41,7 @@ var UserGist = React.createClass({ }); React.renderComponent( - , mountNode + , + mountNode ); ```