From 25be2b63bd85f53d481f371d3f115fb1a5f1db27 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 23 Jan 2017 17:59:44 +0000
Subject: [PATCH] Clarify use of ES6 idiom in Forms doc

---
 docs/forms.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/docs/forms.md b/docs/forms.md
index 23ca336d0..67d102936 100644
--- a/docs/forms.md
+++ b/docs/forms.md
@@ -233,6 +233,22 @@ class Reservation extends React.Component {
 
 [Try it on CodePen.](https://codepen.io/keyanzhang/pen/pRENvx?editors=0010)
 
+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:
+
+```js{2}
+this.setState({
+  [name]: value
+});
+```
+
+It is equivalent to this ES5 code:
+
+```js{2}
+var nextState = {};
+nextState[name] = value;
+this.setState(nextState);
+```
+
 ## Alternatives to Controlled Components
 
 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.