add 44-select-controlled-componet.md

Author: Bunlong

_config.yml

@@ -80,7 +80,7 @@ facebook:
   username               :
   app_id                 :
   publisher              :
-og_image                 : "/assets/images/learn-create-react-app.png" # Open Graph/Twitter default site image
+og_image                 : "/assets/images/learn-reactjs.png" # Open Graph/Twitter default site image
 # For specifying social profiles
 # - https://developers.google.com/structured-data/customize/social-profiles
 social:

_data/navigation.yml

@@ -104,6 +104,8 @@ docs:
         url: /what-is-controlled-component
       - title: "Textarea"
         url: /textarea-controlled-componet
+      - title: "Select"
+        url: /select-controlled-componet
       # - title: "Installation"
       #   url: /install-create-react-app
       # - title: "Structure"

_docs/44-select-controlled-componet.md

@@ -0,0 +1,29 @@
+---
+title: "Select"
+permalink: /select-controlled-componet
+excerpt: "React Forms Select Controlled Component - Learn React"
+last_modified_at: 2018-05-23T15:58:49-04:00
+---
+
+In HTML, `<select>` form element creates a drop-down list.
+
+```javascript
+<select>
+  <option value="papaya">Papaya</option>
+  <option value="orange">Orange</option>
+  <option selected value="coconut">Coconut</option>
+</select>
+```
+
+Note that the Coconut option is selected by default, 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.
+
+<p data-height="265" data-theme-id="0" data-slug-hash="OZGvRX" data-default-tab="js,result" data-user="Bunlong" data-embed-version="2" data-pen-title="OZGvRX" class="codepen">See the Pen <a href="https://codepen.io/Bunlong/pen/OZGvRX/">OZGvRX</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>
+
+Note:
+
+You can pass an array into the value attribute, allowing you to select multiple options in a select form element.
+
+```javascript
+<select multiple={true} value={['B', 'C']}>
+```

_site/index.html

@@ -25,13 +25,13 @@
 
 
 
-  <meta property="og:image" content="/assets/images/learn-create-react-app.png">
+  <meta property="og:image" content="/assets/images/learn-reactjs.png">
 
 
 
 
 
-  <meta property="article:published_time" content="2018-05-23T15:09:44+07:00">
+  <meta property="article:published_time" content="2018-05-23T16:21:33+07:00">
 
 
 
@@ -55,7 +55,7 @@
       "@context": "http://schema.org",
       "@type": "Organization",
       "url": null,
-      "logo": "/assets/images/learn-create-react-app.png"
+      "logo": "/assets/images/learn-reactjs.png"
     }
   </script>
 
@@ -616,6 +616,14 @@
 
             <li><a href="/textarea-controlled-componet" class="">Textarea</a></li>
 
+            
+            
+
+            
+            
+
+            <li><a href="/select-controlled-componet" class="">Select</a></li>
+          
         </ul>
 
       </li>

_site/sitemap.xml

@@ -173,6 +173,10 @@
 <lastmod>2018-05-24T02:58:49+07:00</lastmod>
 </url>
 <url>
+<loc>/select-controlled-componet</loc>
+<lastmod>2018-05-24T02:58:49+07:00</lastmod>
+</url>
+<url>
 <loc>/</loc>
 </url>
 </urlset>