Try the [JSX compiler](http://facebook.github.io/react/jsx-compiler.html) to see how this works. It's a very simple transformation, thus making JSX entirely optional to use with React.
Try the [JSX compiler](http://facebook.github.io/react/jsx-compiler.html).
Try the [JSX compiler](http://facebook.github.io/react/jsx-compiler.html) to see how this works. It's a very simple transformation, thus making JSX entirely optional to use with React.
Try the [JSX compiler](http://facebook.github.io/react/jsx-compiler.html).
Currently in `render`, you can only return one node; if you have, say, a list of `div`s to return, you must wrap your components within, say, one big `div` or `span` (or any other component).
Currently, in a component's`render`, you can only return one node; if you have, say, a list of `div`s to return, you must wrap your components within a `div`, `span` or any other component.
Don't forget that JSX compiles into regular js, and returning two functions doesn't really make syntactic sense.
Don't forget that JSX compiles into regular js; returning two functions doesn't really make syntactic sense.
You might have tried to return more than one node from JSX in `render`. Currently, you can only return one node; meaning that you must wrap your components within, say, a `div` or a `span` (or any other component).
You might have tried to return more than one node in your component's `render`. Currently, you can only return one node, meaning that you must wrap your components within, say, a `div` or a `span` (or any other component).
### Discussion
Don't forget that JSX compiles into regular js, and returning two functions doesn't really make syntactic sense.
Don't forget that JSX compiles into regular js; returning two functions doesn't really make syntactic sense.
When specifying a pixel value for your inline `style` prop, React actually automatically appends the string "px" for you after your number, so this works:
When specifying a pixel value for your inline `style` prop, React automatically appends the string "px" for you after your number value, so this works:
```js
/** @jsx React.DOM */
@ -14,7 +14,7 @@ var divStyle = {height: 10}; // rendered as "height:10px"
Usually, when manipulating a component's children through `this.props.children`, an array is expected. To save an extra array allocation, when `children` only contains one single component, it returns the component itself, without the array wrapper.
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.
This means accessing, for example, `this.props.children.length` might be misleading since it could be the length property of a single string component.
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.
You get errors while manipulating `this.props.children` inside a component.
### Solution
Usually, `children` is an array of components. To save an extra array allocation, when it only contains one single component, it returns the component itself.
Usually, `children` is an array of components. To save an extra array allocation, it returns the component itself when there's only one.
This means accessing, for example, `this.props.children.length` might be misleading since it could be the length property of a single string component.
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.
With a controlled input component, specifying a `value` prevents the user from changing the input unless you desire so (more info [here](forms.html)).
Specifying the `value` prop on a [controlled component](forms.html) prevents the user from changing the input unless you desire so.
You might have run into a problem where you specified a `value` but the input can still be changed. In this case, you might have accidentally set your `value` to `undefined` or `null`. The snippet below shows this phenomenon; after a second, the text can be edited.
You might have run into a problem where `value` is specified, but the input can still be changed without consent. In this case, you might have accidentally set `value` to `undefined` or `null`.
The snippet below shows this phenomenon; after a second, the text becomes editable.
You specified a `value` parameter for your form input, but the input value can still be modified, contrary to [what you'd expect](forms.html).
### Solution
You might have accidentally set your `value` to `undefined` or `null`. The snippet below shows this phenomenon; after a second, the text can be edited.
You might have accidentally set `value` to `undefined` or `null`. The snippet below shows this phenomenon; after a second, the text becomes editable.
`componentWillReceiveProps` isn't triggered after the node is put on scene. This is by design. Check out [other lifecycle methods](component-specs.html) for the one that suits your needs.
The reason for that is because `componentWillReceiveProps` often handles the logic of comparing with the old props and act upon changes; not triggering it at mounting, where there are no old props, clearly defines what the method should do.
The reason for that is because `componentWillReceiveProps` often handles the logic of comparing with the old props and acting upon changes; not triggering it at mounting (where there are no old props) helps in defining what the method does.
This is by design. Check out [other lifecycle methods](component-specs.html) for the one that suits your needs.
### Discussion
`componentWillReceiveProps` often handles the logic of comparing with the old props and act upon changes; not triggering it at mounting, where there are no old props, clearly defines what the method should do.
`componentWillReceiveProps` often handles the logic of comparing with the old props and acting upon changes; not triggering it at mounting (where there are no old props) helps in defining what the method does.
Cheng Lou
11 years ago
Connor McSheffrey