From 0bb04517d6bd044e88fa7fb2c806f31864c3867a Mon Sep 17 00:00:00 2001
From: Asabeneh <asabeneh@gmail.com>
Date: Mon, 5 Oct 2020 22:06:36 +0300
Subject: [PATCH] day_5 has been cleaned

---
 .../src/index.js                              | 21 +++++++++++++---
 06_Day_Map_List_Keys/05_map_list_keys.md      | 25 +++++++++++++++++++
 2 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 06_Day_Map_List_Keys/05_map_list_keys.md

diff --git a/05_Day_Props/30-days-of-react_boilerplate-props/src/index.js b/05_Day_Props/30-days-of-react_boilerplate-props/src/index.js
index 470e9315ac..261690b07e 100644
--- a/05_Day_Props/30-days-of-react_boilerplate-props/src/index.js
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/src/index.js
@@ -70,7 +70,22 @@ const UserCard = ({ user: { firstName, lastName, image } }) => (
 
 // A button component
 
-const Button = ({ text, onClick }) => <button onClick={onClick}>{text}</button>
+const Button = ({ text, onClick, style }) => (
+  <button style={style} onClick={onClick}>
+    {text}
+  </button>
+)
+
+const buttonStyles = {
+  backgroundColor: '#61dbfb',
+  padding: 10,
+  border: 'none',
+  borderRadius: 5,
+  margin: 3,
+  cursor: 'pointer',
+  fontSize: 18,
+  color: 'white',
+}
 
 // Main Component
 const Main = ({ user, techs, greetPeople, handleTime }) => (
@@ -81,8 +96,8 @@ const Main = ({ user, techs, greetPeople, handleTime }) => (
         <TechList techs={techs} />
       </ul>
       <UserCard user={user} />
-      <Button text='Greet People' onClick={greetPeople} />
-      <Button text='Show Time' onClick={handleTime} />
+      <Button text='Greet People' onClick={greetPeople} style={buttonStyles} />
+      <Button text='Show Time' onClick={handleTime} style={buttonStyles} />
     </div>
   </main>
 )
diff --git a/06_Day_Map_List_Keys/05_map_list_keys.md b/06_Day_Map_List_Keys/05_map_list_keys.md
new file mode 100644
index 0000000000..8db709d035
--- /dev/null
+++ b/06_Day_Map_List_Keys/05_map_list_keys.md
@@ -0,0 +1,25 @@
+<div align="center">
+  <h1> 30 Days Of React: Components </h1>
+  <a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
+  <img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
+  </a>
+  <a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
+  <img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
+  </a>
+
+<sub>Author:
+<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
+<small> October, 2020</small>
+</sub>
+
+</div>
+
+[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>](./05_Day_Props/05_props.md)
+
+![30 Days of React banner](../images/30_days_of_react_banner_day_4.jpg)
+
+# Mapping lists
+
+Before we jump into mapping an array in React, lets see what we do it in pure JavaScritp.
+
+[<< Day 4](../04_Day_Component/04_components.md) | [Day 6 >>]()