From a484f30bc58ab169275c0076483f667734da41cb Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 17 Nov 2016 14:23:20 +0000
Subject: [PATCH] Tweak examples

---
 docs/docs/forms.md                   | 10 +++++-----
 docs/docs/uncontrolled-components.md | 24 ++++++++++++++----------
 2 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/docs/docs/forms.md b/docs/docs/forms.md
index 8724ea58ed..d7c06e33a9 100644
--- a/docs/docs/forms.md
+++ b/docs/docs/forms.md
@@ -29,7 +29,7 @@ We can combine the two by making the React state be the "single source of truth"
 
 For example, if we want to make the previous example log the name when it is submitted, we can write the form as a controlled component:
 
-```javascript{4,10-12,23}
+```javascript{4,10-12,24}
 class NameForm extends React.Component {
   constructor(props) {
     super(props);
@@ -62,7 +62,7 @@ class NameForm extends React.Component {
 }
 ```
 
-[Try it on CodePen.](https://codepen.io/lacker/pen/oYNzxY?editors=0010)
+[Try it on CodePen.](https://codepen.io/gaearon/pen/VmmPgp?editors=0010)
 
 Since the `value` attribute is set on our form element, the displayed value will always be `this.state.value`, making the React state the source of truth. Since `handleChange` runs on every keystroke to update the React state, the displayed value will update as the user types.
 
@@ -86,7 +86,7 @@ In HTML, a `<textarea>` element defines its text by its children:
 
 In React, a `<textarea>` uses a `value` attribute instead. This way, a form using a `<textarea>` can be written very similarly to a form that uses a single-line input:
 
-```javascript{4-6,12-14,25}
+```javascript{4-6,12-14,26}
 class EssayForm extends React.Component {
   constructor(props) {
     super(props);
@@ -138,7 +138,7 @@ In HTML, `<select>` creates a drop-down list. For example, this HTML creates a d
 
 Note that the Coconut option is initially selected, because of the `selected` attribute. React, instead of using this `selected` attribute, uses a `value` attribute on the root `select` tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
 
-```javascript{4,10-12,23}
+```javascript{4,10-12,24}
 class FlavorForm extends React.Component {
   constructor(props) {
     super(props);
@@ -176,7 +176,7 @@ class FlavorForm extends React.Component {
 }
 ```
 
-[Try it on CodePen.](https://codepen.io/lacker/pen/QGWKQP?editors=0010)
+[Try it on CodePen.](https://codepen.io/gaearon/pen/JbbEzX?editors=0010)
 
 Overall, this makes it so that `<input type="text">`, `<textarea>`, and `<select>` all work very similarly - they all accept a `value` attribute that you can use to implement a controlled component.
 
diff --git a/docs/docs/uncontrolled-components.md b/docs/docs/uncontrolled-components.md
index d28c8b8dac..e464f319ef 100644
--- a/docs/docs/uncontrolled-components.md
+++ b/docs/docs/uncontrolled-components.md
@@ -10,7 +10,7 @@ To write an uncontrolled component, instead of writing an event handler for ever
 
 For example, this code accepts a single name in an uncontrolled component:
 
-```javascript{8,16}
+```javascript{8,17}
 class NameForm extends React.Component {
   constructor(props) {
     super(props);
@@ -25,8 +25,10 @@ class NameForm extends React.Component {
   render() {
     return (
       <form onSubmit={this.handleSubmit}>
-        Name:
-        <input type="text" ref={(input) => this.input = input} />
+        <label>
+          Name:
+          <input type="text" ref={(input) => this.input = input} />
+        </label>
         <input type="submit" value="Submit" />
       </form>
     );
@@ -34,7 +36,7 @@ class NameForm extends React.Component {
 }
 ```
 
-[Try it on CodePen.](https://codepen.io/lacker/pen/XNWjOj?editors=0010)
+[Try it on CodePen.](https://codepen.io/gaearon/pen/WooRWa?editors=0010)
 
 Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
 
@@ -42,15 +44,17 @@ Since an uncontrolled component keeps the source of truth in the DOM, it is some
 
 In the React rendering lifecycle, the `value` attribute on form elements will override the value in the DOM. With an uncontrolled component, you often want React to specify the initial value, but leave subsequent updates uncontrolled. To handle this case, you can specify a `defaultValue` attribute instead of `value`.
 
-```javascript{6}
+```javascript{7}
 render() {
   return (
     <form onSubmit={this.handleSubmit}>
-      Name:
-      <input
-        defaultValue="Bob"
-        type="text"
-        ref={(input) => this.input = input} />
+      <label>
+        Name:
+        <input
+          defaultValue="Bob"
+          type="text"
+          ref={(input) => this.input = input} />
+      </label>
       <input type="submit" value="Submit" />
     </form>
   );