{"commit":{"authorEmail":"jsproch@fb.com","revision":"220b4b6b50eb146c6e18934aa86afaa3250247ab","authorName":"Jim","authoredAt":"2016-02-04T08:34:30-08:00","shortRevision":"220b4b6b50","subject":"Merge pull request #4437 from gajus\/patch-1"},"body":"Improve definition of the controlled and uncontrolled input","parents":["f2bb01506afd85646549c23c2e0664979ffad3d4","97e0fe5d919368177494dd5d2a562a573df36196"],"files":[{"status":"M","path":"docs\/docs\/07-forms.md"}],"patch":"diff --git a\/docs\/docs\/07-forms.md b\/docs\/docs\/07-forms.md\nindex c452940d6a..5f0c4ebdf0 100644\n--- a\/docs\/docs\/07-forms.md\n+++ b\/docs\/docs\/07-forms.md\n@@ -34,7 +34,7 @@ Like all DOM events, the `onChange` prop is supported on all native components a\n \n ## Controlled Components\n \n-An `` with `value` set is a *controlled* component. In a controlled ``, the value of the rendered element will always reflect the `value` prop. For example:\n+A **controlled** `` has a `value` prop. Rendering a controlled `` will reflect the value of the `value` prop.\n \n ```javascript\n render: function() {\n@@ -42,7 +42,7 @@ An `` with `value` set is a *controlled* component. In a controlled `;\n+ return (\n+ \n+ );\n }\n ```\n \n-In this example, we are simply accepting the newest value provided by the user and updating the `value` prop of the `` component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example:\n+In this example, we are accepting the value provided by the user and updating the `value` prop of the `` component. This pattern makes it easy to implement interfaces that respond to or validate user interactions. For example:\n \n ```javascript\n handleChange: function(event) {\n@@ -65,7 +70,9 @@ In this example, we are simply accepting the newest value provided by the user a\n }\n ```\n \n-This would accept user input but truncate the value to the first 140 characters.\n+This would accept user input and truncate the value to the first 140 characters.\n+\n+A **Controlled** component maintains its own internal state; the component renders purely based on props.\n \n ### Potential Issues With Checkboxes and Radio Buttons\n \n@@ -73,7 +80,7 @@ Be aware that, in an attempt to normalize change handling for checkbox and radio\n \n ## Uncontrolled Components\n \n-An `` that does not supply a `value` (or sets it to `null`) is an *uncontrolled* component. In an uncontrolled ``, the value of the rendered element will reflect the user's input. For example:\n+An `` without a `value` property is an *uncontrolled* component:\n \n ```javascript\n render: function() {\n@@ -83,6 +90,8 @@ An `` that does not supply a `value` (or sets it to `null`) is an *uncont\n \n This will render an input that starts off with an empty value. Any user input will be immediately reflected by the rendered element. If you wanted to listen to updates to the value, you could use the `onChange` event just like you can with controlled components.\n \n+An **uncontrolled** component maintains its own internal state.\n+\n ### Default Value\n \n If you want to initialize the component with a non-empty value, you can supply a `defaultValue` prop. For example:\n"}

dillon1000/react

Files changed