Display value for controlled select and textarea

facebook · Jan 2, 2017 · 62c3c4b · 62c3c4b
1 parent f16e67e
commit 62c3c4b
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 13 deletions.
diff --git a/fixtures/selects/index.html b/fixtures/selects/index.html
@@ -26,6 +26,10 @@
         padding: 20px;
         width: 45%;
       }
+
+      .hint {
+        padding-left: 8px;
+      }
     </style>
   </head>
   <body>
@@ -55,8 +59,9 @@
                   <option value="">Select a color</option>
                   <option value="red">Red</option>
                   <option value="blue">Blue</option>
-                  <option value="gree">Green</option>
+                  <option value="green">Green</option>
                 </select>
+                <span className="hint">Value: {this.state.value}</span>
               </fieldset>
 
               <fieldset>

diff --git a/fixtures/textareas/index.html b/fixtures/textareas/index.html
@@ -20,19 +20,26 @@
         width: 100%;
       }
 
-      form {
+      .container {
         max-width: 900px;
         margin: 0 auto;
         text-align: center;
       }
 
+      .output {
+        word-wrap: break-word;
+        max-width: 780px;
+        margin: auto;
+      }
+
       fieldset {
         border: 1px solid #ccc;
         display: inline-block;
         padding: 20px;
         vertical-align: top;
         width: 45%;
       }
+
     </style>
   </head>
   <body>
@@ -55,17 +62,23 @@
 
         render() {
           return (
-            <form>
-              <fieldset>
-                <legend>Controlled</legend>
-                <textarea value={this.state.value} onChange={this.onChange.bind(this)} />
-              </fieldset>
-
-              <fieldset>
-                <legend>Uncontrolled</legend>
-                <textarea defaultValue="" />
-              </fieldset>
-            </form>
+            <div className='container'>
+              <form>
+                <fieldset>
+                  <legend>Controlled</legend>
+                  <textarea value={this.state.value} onChange={this.onChange.bind(this)} />
+                </fieldset>
+
+                <fieldset>
+                  <legend>Uncontrolled</legend>
+                  <textarea defaultValue="" />
+                </fieldset>
+              </form>
+              <h4>Controlled Output:</h4>
+                <div className='output'>
+                  {this.state.value}
+                </div>
+            </div>
           )
         }
       }