add 46-what-is-uncontrolled-component.md

Author: Bunlong

_data/navigation.yml

@@ -110,6 +110,10 @@ docs:
         url: /select-controlled-componet
       - title: "Multiple Inputs"
         url: /multiple-inputs-controlled-componet
+  - title: React Forms Uncontrolled Component
+    children:
+      - title: "What is Uncontrolled Component?"
+        url: /what-is-uncontrolled-component
       # - title: "Installation"
       #   url: /install-create-react-app
       # - title: "Structure"

_docs/46-what-is-uncontrolled-component.md

@@ -0,0 +1,19 @@
+---
+title: "What is Uncontrolled Component?"
+permalink: /what-is-uncontrolled-component
+excerpt: "What is Uncontrolled Component? - Learn React"
+last_modified_at: 2018-05-23T15:58:49-04:00
+---
+
+A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a `ref` to find its current value when you need it. This is a bit more like traditional HTML.
+
+For the example below, this code accepts a single name in an uncontrolled component:
+
+<p data-height="265" data-theme-id="0" data-slug-hash="RympZV" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="RympZV" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/RympZV/">RympZV</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>` query the DOM using a `ref`, stores the DOM in its own state `this.input`, and find it's current value using `this.input.value`.
+
+Since an uncontrolled component keeps the source in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components.
+
+If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react) to be helpful.

_site/index.html

@@ -31,7 +31,7 @@
 
 
 
-  <meta property="article:published_time" content="2018-05-23T23:51:28+07:00">
+  <meta property="article:published_time" content="2018-05-24T11:04:15+07:00">
 
 
 
@@ -644,6 +644,26 @@
 
       </li>
 
+      <li>
+        
+          <span class="nav__sub-title">React Forms Uncontrolled Component</span>
+        
+
+        
+        <ul>
+          
+            
+            
+
+            
+            
+
+            <li><a href="/what-is-uncontrolled-component" class="">What is Uncontrolled Component?</a></li>
+          
+        </ul>
+        
+      </li>
+    
   </ul>
 </nav>
 
@@ -655,7 +675,7 @@
     <meta itemprop="headline" content="Brief Introduction">
     <meta itemprop="description" content="Welcome to Learn React, a comprehensive introduction to Reactjs. - Learn React">
 
-    <meta itemprop="dateModified" content="May 14, 2018">
+    <meta itemprop="dateModified" content="May 15, 2018">
 
     <div class="page__inner-wrap">
 
@@ -685,7 +705,7 @@ <h1 id="page-title" class="page__title" itemprop="headline">Brief Introduction
 
 
 
-          <p class="page__date"><strong><i class="fas fa-fw fa-calendar-alt" aria-hidden="true"></i> Updated:</strong> <time datetime="2018-05-14">May 14, 2018</time></p>
+          <p class="page__date"><strong><i class="fas fa-fw fa-calendar-alt" aria-hidden="true"></i> Updated:</strong> <time datetime="2018-05-15">May 15, 2018</time></p>
 
       </footer>
 

_site/sitemap.xml

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