add what-is-controlled-component.md

Author: Bunlong

_data/navigation.yml

@@ -98,6 +98,10 @@ docs:
         url: /state-vs-props
       - title: "Creating Stateless Function Components"
         url: /create-stateless-function-component
+  - title: React Forms Controlled Component
+    children:
+      - title: "What is Controlled Component?"
+        url: /what-is-controlled-component
       # - title: "Installation"
       #   url: /install-create-react-app
       # - title: "Structure"

_docs/42-what-is-controlled-component.md

@@ -0,0 +1,15 @@
+---
+title: "What is Controlled Component?"
+permalink: /what-is-controlled-component
+excerpt: "What is Controlled Component? - Learn React"
+last_modified_at: 2018-05-21T15:58:49-04:00
+---
+
+A Controlled Component is one that takes its current value through state and notifies changes through callbacks like `onChange`.
+
+For example below, I log the name when it is submitted, with controlled component:
+
+<p data-height="265" data-theme-id="0" data-slug-hash="pVBwwa" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="pVBwwa" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/pVBwwa/">pVBwwa</a> by Bunlong (<a href="https://codepen.io/Bunlong">@Bunlong</a>) on <a href="https://codepen.io">CodePen</a>.</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+`<input>` form element takes its current value through `this.state.value`. `handleChange` runs on every keystroke to update `this.state.value`, the displayed value will update as the user types.

_site/index.html

@@ -31,7 +31,7 @@
 
 
 
-  <meta property="article:published_time" content="2018-05-22T14:00:12+07:00">
+  <meta property="article:published_time" content="2018-05-23T14:20:48+07:00">
 
 
 
@@ -592,6 +592,26 @@
 
       </li>
 
+      <li>
+        
+          <span class="nav__sub-title">React Forms Controlled Component</span>
+        
+
+        
+        <ul>
+          
+            
+            
+
+            
+            
+
+            <li><a href="/what-is-controlled-component" class="">What is Controlled Component?</a></li>
+          
+        </ul>
+        
+      </li>
+    
   </ul>
 </nav>
 

_site/sitemap.xml

@@ -165,6 +165,10 @@
 <lastmod>2018-05-22T02:58:49+07:00</lastmod>
 </url>
 <url>
+<loc>/what-is-controlled-component</loc>
+<lastmod>2018-05-22T02:58:49+07:00</lastmod>
+</url>
+<url>
 <loc>/</loc>
 </url>
 </urlset>