From 412caebadaab2c09a910701cafd7da7f3d08706f Mon Sep 17 00:00:00 2001
From: Saugat Acharya <mesaugat@gmail.com>
Date: Fri, 29 Dec 2017 15:55:03 +0545
Subject: [PATCH] Extract items to a list

---
 src/App.js | 52 ++++++++++++++++++++++++++++++----------------------
 1 file changed, 30 insertions(+), 22 deletions(-)

diff --git a/src/App.js b/src/App.js
index 3fa11c2..007aa02 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,36 +1,44 @@
 import React from 'react';
 
 /**
- * Return HTML skeleton for todo list.
+ * Map items from an array to HTML.
  */
 function App() {
+  const items = [
+    {
+      id: 1,
+      text: 'Take out the trash',
+      completed: false
+    },
+    {
+      id: 2,
+      text: 'Buy bread',
+      completed: false
+    },
+    {
+      id: 3,
+      text: 'Teach penguins to fly',
+      completed: true
+    }
+  ];
+
   return (
     <div className="container">
       <div className="row">
         <div className="todolist">
           <h1>Todos</h1>
           <ul className="list-unstyled">
-            <li className="ui-state-default">
-              <div className="checkbox">
-                  <label>
-                    <input type="checkbox" value=""/>Take out the trash
-                  </label>
-              </div>
-            </li>
-            <li className="ui-state-default">
-              <div className="checkbox">
-                  <label>
-                    <input type="checkbox" value=""/>Buy bread
-                  </label>
-              </div>
-            </li>
-            <li className="ui-state-default">
-              <div className="checkbox">
-                <label>
-                  <input type="checkbox" value=""/>Teach penguins to fly
-                </label>
-              </div>
-            </li>
+            {
+              items && items.map(item =>
+                <li key={item.id} className="ui-state-default">
+                  <div className="checkbox">
+                    <label>
+                      <input type="checkbox" checked={item.completed}/>{item.text}
+                    </label>
+                  </div>
+                </li>
+              )
+            }
           </ul>
         </div>
       </div>