Clarify use of ES6 idiom in Forms doc
Dan Abramov committed
Jan 23, 2017 at 17:59 UTC
beb2e0124dfcc0e2bcfc2ca436af57153779a6fc
1 file changed
+16
docs/docs/forms.md
+16
@@ -233,6 +233,22 @@ class Reservation extends React.Component {
233
234
[Try it on CodePen.](https://codepen.io/keyanzhang/pen/pRENvx?editors=0010)
235
236
+Note how we used the ES6 [computed property name](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names) syntax to update the state key corresponding to the given input name:
237
+
238
+```js{2}
239
+this.setState({
240
+ [name]: value
241
+});
242
+```
243
+
244
+It is equivalent to this ES5 code:
245
+
246
+```js{2}
247
+var nextState = {};
248
+nextState[name] = value;
249
+this.setState(nextState);
250
+```
251
+
252
## Alternatives to Controlled Components
253
254
It can sometimes be tedious to use controlled components, because you need to write an event handler for every way your data can change and pipe all of the input state through a React component. This can become particularly annoying when you are converting a preexisting codebase to React, or integrating a React application with a non-React library. In these situations, you might want to check out [uncontrolled components](/react/docs/uncontrolled-components.html), an alternative technique for implementing input forms.