diff --git a/.gitignore b/.gitignore
index f420b9b..2684f5b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
 draft.md
 react-for-everyone.md
 component.md
-05_Day_Map_List_Keys
\ No newline at end of file
+06_Day_Map_List_Keys
\ No newline at end of file
diff --git a/02_Day_Introduction_to_React/02_introduction_to_react.md b/02_Day_Introduction_to_React/02_introduction_to_react.md
index 06339ec..6c2363a 100644
--- a/02_Day_Introduction_to_React/02_introduction_to_react.md
+++ b/02_Day_Introduction_to_React/02_introduction_to_react.md
@@ -14,7 +14,7 @@
 
 </div>
 
-[<< Day 1](../01_Day_JavaScript_Refresher/01_javascript_refresher.md) | [Day 3 >>](../03_Day_Setting_Up/03_day_setting_up.md)
+[<< Day 1](../01_Day_JavaScript_Refresher/01_javascript_refresher.md) | [Day 3 >>](../03_Day_Setting_Up/03_setting_up.md)
 
 ![30 Days of React banner](../images/30_days_of_react_banner_day_2.jpg)
 
@@ -1600,4 +1600,4 @@ Now, you have a very good understanding of how to create JSX element and also ho
 
 🎉 CONGRATULATIONS ! 🎉
 
-[<< Day 1](../01_Day_JavaScript_Refresher/01_javascript_refresher.md) | [Day 3 >>](../03_Day_Setting_Up/03_day_setting_up.md)
+[<< Day 1](../01_Day_JavaScript_Refresher/01_javascript_refresher.md) | [Day 3 >>](../03_Day_Setting_Up/03_setting_up.md)
diff --git a/03_Day_Setting_Up/03_day_setting_up.md b/03_Day_Setting_Up/03_setting_up.md
similarity index 100%
rename from 03_Day_Setting_Up/03_day_setting_up.md
rename to 03_Day_Setting_Up/03_setting_up.md
diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/.gitignore b/03_Day_Setting_Up/03_setting_up_boilerplate/.gitignore
similarity index 100%
rename from 03_Day_Setting_Up/30-days-of-react_boilerplate/.gitignore
rename to 03_Day_Setting_Up/03_setting_up_boilerplate/.gitignore
diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/README.md b/03_Day_Setting_Up/03_setting_up_boilerplate/README.md
similarity index 100%
rename from 03_Day_Setting_Up/30-days-of-react_boilerplate/README.md
rename to 03_Day_Setting_Up/03_setting_up_boilerplate/README.md
diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/package.json b/03_Day_Setting_Up/03_setting_up_boilerplate/package.json
similarity index 100%
rename from 03_Day_Setting_Up/30-days-of-react_boilerplate/package.json
rename to 03_Day_Setting_Up/03_setting_up_boilerplate/package.json
diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/public/index.html b/03_Day_Setting_Up/03_setting_up_boilerplate/public/index.html
similarity index 100%
rename from 03_Day_Setting_Up/30-days-of-react_boilerplate/public/index.html
rename to 03_Day_Setting_Up/03_setting_up_boilerplate/public/index.html
diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/asabeneh.jpg b/03_Day_Setting_Up/03_setting_up_boilerplate/src/images/asabeneh.jpg
similarity index 100%
rename from 03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/asabeneh.jpg
rename to 03_Day_Setting_Up/03_setting_up_boilerplate/src/images/asabeneh.jpg
diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/css_logo.png b/03_Day_Setting_Up/03_setting_up_boilerplate/src/images/css_logo.png
similarity index 100%
rename from 03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/css_logo.png
rename to 03_Day_Setting_Up/03_setting_up_boilerplate/src/images/css_logo.png
diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/html_logo.png b/03_Day_Setting_Up/03_setting_up_boilerplate/src/images/html_logo.png
similarity index 100%
rename from 03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/html_logo.png
rename to 03_Day_Setting_Up/03_setting_up_boilerplate/src/images/html_logo.png
diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/react_logo.png b/03_Day_Setting_Up/03_setting_up_boilerplate/src/images/react_logo.png
similarity index 100%
rename from 03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/react_logo.png
rename to 03_Day_Setting_Up/03_setting_up_boilerplate/src/images/react_logo.png
diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/index.js b/03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js
similarity index 100%
rename from 03_Day_Setting_Up/30-days-of-react_boilerplate/src/index.js
rename to 03_Day_Setting_Up/03_setting_up_boilerplate/src/index.js
diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/math.js b/03_Day_Setting_Up/03_setting_up_boilerplate/src/math.js
similarity index 100%
rename from 03_Day_Setting_Up/30-days-of-react_boilerplate/src/math.js
rename to 03_Day_Setting_Up/03_setting_up_boilerplate/src/math.js
diff --git a/03_Day_Setting_Up/30-days-of-react_boilerplate/yarn.lock b/03_Day_Setting_Up/03_setting_up_boilerplate/yarn.lock
similarity index 100%
rename from 03_Day_Setting_Up/30-days-of-react_boilerplate/yarn.lock
rename to 03_Day_Setting_Up/03_setting_up_boilerplate/yarn.lock
diff --git a/04_Day_Component/30-days-of-react_boilerplate-components/.gitignore b/04_Day_Component/04_component_boilerplate/.gitignore
similarity index 100%
rename from 04_Day_Component/30-days-of-react_boilerplate-components/.gitignore
rename to 04_Day_Component/04_component_boilerplate/.gitignore
diff --git a/04_Day_Component/30-days-of-react_boilerplate-components/README.md b/04_Day_Component/04_component_boilerplate/README.md
similarity index 100%
rename from 04_Day_Component/30-days-of-react_boilerplate-components/README.md
rename to 04_Day_Component/04_component_boilerplate/README.md
diff --git a/04_Day_Component/30-days-of-react_boilerplate-components/package.json b/04_Day_Component/04_component_boilerplate/package.json
similarity index 100%
rename from 04_Day_Component/30-days-of-react_boilerplate-components/package.json
rename to 04_Day_Component/04_component_boilerplate/package.json
diff --git a/04_Day_Component/30-days-of-react_boilerplate-components/public/index.html b/04_Day_Component/04_component_boilerplate/public/index.html
similarity index 100%
rename from 04_Day_Component/30-days-of-react_boilerplate-components/public/index.html
rename to 04_Day_Component/04_component_boilerplate/public/index.html
diff --git a/04_Day_Component/30-days-of-react_boilerplate-components/src/images/asabeneh.jpg b/04_Day_Component/04_component_boilerplate/src/images/asabeneh.jpg
similarity index 100%
rename from 04_Day_Component/30-days-of-react_boilerplate-components/src/images/asabeneh.jpg
rename to 04_Day_Component/04_component_boilerplate/src/images/asabeneh.jpg
diff --git a/04_Day_Component/30-days-of-react_boilerplate-components/src/images/css_logo.png b/04_Day_Component/04_component_boilerplate/src/images/css_logo.png
similarity index 100%
rename from 04_Day_Component/30-days-of-react_boilerplate-components/src/images/css_logo.png
rename to 04_Day_Component/04_component_boilerplate/src/images/css_logo.png
diff --git a/04_Day_Component/30-days-of-react_boilerplate-components/src/images/html_logo.png b/04_Day_Component/04_component_boilerplate/src/images/html_logo.png
similarity index 100%
rename from 04_Day_Component/30-days-of-react_boilerplate-components/src/images/html_logo.png
rename to 04_Day_Component/04_component_boilerplate/src/images/html_logo.png
diff --git a/04_Day_Component/30-days-of-react_boilerplate-components/src/images/react_logo.png b/04_Day_Component/04_component_boilerplate/src/images/react_logo.png
similarity index 100%
rename from 04_Day_Component/30-days-of-react_boilerplate-components/src/images/react_logo.png
rename to 04_Day_Component/04_component_boilerplate/src/images/react_logo.png
diff --git a/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js b/04_Day_Component/04_component_boilerplate/src/index.js
similarity index 97%
rename from 04_Day_Component/30-days-of-react_boilerplate-components/src/index.js
rename to 04_Day_Component/04_component_boilerplate/src/index.js
index defe4d2..533e142 100644
--- a/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js
+++ b/04_Day_Component/04_component_boilerplate/src/index.js
@@ -106,5 +106,5 @@ const App = () => (
 )
 
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
+// we render the App component using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
diff --git a/04_Day_Component/30-days-of-react_boilerplate-components/yarn.lock b/04_Day_Component/04_component_boilerplate/yarn.lock
similarity index 100%
rename from 04_Day_Component/30-days-of-react_boilerplate-components/yarn.lock
rename to 04_Day_Component/04_component_boilerplate/yarn.lock
diff --git a/04_Day_Component/04_components.md b/04_Day_Component/04_components.md
index f3c818c..d949b5e 100644
--- a/04_Day_Component/04_components.md
+++ b/04_Day_Component/04_components.md
@@ -14,7 +14,7 @@
 
 </div>
 
-[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>](./05_Day_Props/05_props.md)
+[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_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)
 
@@ -282,7 +282,7 @@ const App = () => (
 )
 
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
+// we render the App component using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -322,7 +322,7 @@ const header = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
+// we render the App component using the ReactDOM package
 ReactDOM.render(<Header />, rootElement)
 ```
 
@@ -430,7 +430,7 @@ const app = () => (
   </div>
 )
 
-// we render the JSX element using the ReactDOM package
+// we render the App component using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -476,7 +476,7 @@ const hexaColor = () => {
 const HexaColor = () => <div>{hexaColor()}</div>
 
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
+// we render the App component using the ReactDOM package
 ReactDOM.render(<HexaColor />, rootElement)
 ```
 
@@ -499,4 +499,4 @@ ReactDOM.render(<HexaColor />, rootElement)
 
 🎉 CONGRATULATIONS ! 🎉
 
-[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>](./05_Day_Props/05_props.md)
+[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_setting_up.md) | [Day 5 >>](./05_Day_Props/05_props.md)
diff --git a/05_Day_Props/05_props.md b/05_Day_Props/05_props.md
index 2ed3f66..47d1fd2 100644
--- a/05_Day_Props/05_props.md
+++ b/05_Day_Props/05_props.md
@@ -178,7 +178,7 @@ const App = () => {
 }
 
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
+
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -236,7 +236,6 @@ const App = () => (
 )
 
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -300,7 +299,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -334,7 +332,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -368,7 +365,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -524,7 +520,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -609,7 +604,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -667,7 +661,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -821,7 +814,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -898,7 +890,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -984,6 +975,7 @@ const Button = ({ text, onClick, style }) => (
   </button>
 )
 
+// CSS styles in JavaScript Object
 const buttonStyles = {
   backgroundColor: '#61dbfb',
   padding: 10,
@@ -1058,7 +1050,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
diff --git a/05_Day_Props/30-days-of-react_boilerplate-props/.gitignore b/05_Day_Props/05_props_boilerplate/.gitignore
similarity index 100%
rename from 05_Day_Props/30-days-of-react_boilerplate-props/.gitignore
rename to 05_Day_Props/05_props_boilerplate/.gitignore
diff --git a/05_Day_Props/30-days-of-react_boilerplate-props/README.md b/05_Day_Props/05_props_boilerplate/README.md
similarity index 100%
rename from 05_Day_Props/30-days-of-react_boilerplate-props/README.md
rename to 05_Day_Props/05_props_boilerplate/README.md
diff --git a/05_Day_Props/30-days-of-react_boilerplate-props/package.json b/05_Day_Props/05_props_boilerplate/package.json
similarity index 100%
rename from 05_Day_Props/30-days-of-react_boilerplate-props/package.json
rename to 05_Day_Props/05_props_boilerplate/package.json
diff --git a/05_Day_Props/30-days-of-react_boilerplate-props/public/index.html b/05_Day_Props/05_props_boilerplate/public/index.html
similarity index 100%
rename from 05_Day_Props/30-days-of-react_boilerplate-props/public/index.html
rename to 05_Day_Props/05_props_boilerplate/public/index.html
diff --git a/05_Day_Props/30-days-of-react_boilerplate-props/src/images/asabeneh.jpg b/05_Day_Props/05_props_boilerplate/src/images/asabeneh.jpg
similarity index 100%
rename from 05_Day_Props/30-days-of-react_boilerplate-props/src/images/asabeneh.jpg
rename to 05_Day_Props/05_props_boilerplate/src/images/asabeneh.jpg
diff --git a/05_Day_Props/30-days-of-react_boilerplate-props/src/images/css_logo.png b/05_Day_Props/05_props_boilerplate/src/images/css_logo.png
similarity index 100%
rename from 05_Day_Props/30-days-of-react_boilerplate-props/src/images/css_logo.png
rename to 05_Day_Props/05_props_boilerplate/src/images/css_logo.png
diff --git a/05_Day_Props/30-days-of-react_boilerplate-props/src/images/html_logo.png b/05_Day_Props/05_props_boilerplate/src/images/html_logo.png
similarity index 100%
rename from 05_Day_Props/30-days-of-react_boilerplate-props/src/images/html_logo.png
rename to 05_Day_Props/05_props_boilerplate/src/images/html_logo.png
diff --git a/05_Day_Props/30-days-of-react_boilerplate-props/src/images/react_logo.png b/05_Day_Props/05_props_boilerplate/src/images/react_logo.png
similarity index 100%
rename from 05_Day_Props/30-days-of-react_boilerplate-props/src/images/react_logo.png
rename to 05_Day_Props/05_props_boilerplate/src/images/react_logo.png
diff --git a/05_Day_Props/30-days-of-react_boilerplate-props/src/index.js b/05_Day_Props/05_props_boilerplate/src/index.js
similarity index 98%
rename from 05_Day_Props/30-days-of-react_boilerplate-props/src/index.js
rename to 05_Day_Props/05_props_boilerplate/src/index.js
index 261690b..2c53fd8 100644
--- a/05_Day_Props/30-days-of-react_boilerplate-props/src/index.js
+++ b/05_Day_Props/05_props_boilerplate/src/index.js
@@ -150,5 +150,4 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
diff --git a/05_Day_Props/30-days-of-react_boilerplate-props/yarn.lock b/05_Day_Props/05_props_boilerplate/yarn.lock
similarity index 100%
rename from 05_Day_Props/30-days-of-react_boilerplate-props/yarn.lock
rename to 05_Day_Props/05_props_boilerplate/yarn.lock
diff --git a/06_Day_Map_List_Keys/05_map_list_keys.md b/06_Day_Map_List_Keys/05_map_list_keys.md
index 8db709d..215419f 100644
--- a/06_Day_Map_List_Keys/05_map_list_keys.md
+++ b/06_Day_Map_List_Keys/05_map_list_keys.md
@@ -1,5 +1,5 @@
 <div align="center">
-  <h1> 30 Days Of React: Components </h1>
+  <h1> 30 Days Of React: Mapping Arrays </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>
@@ -14,12 +14,249 @@
 
 </div>
 
-[<< Day 3](../30-Days-Of-React/03_Day_Setting_Up/03_day_setting_up.md) | [Day 5 >>](./05_Day_Props/05_props.md)
+[<< Day 5](./../05_Day_Props/05_props.md) | [Day 7 >>]()
 
-![30 Days of React banner](../images/30_days_of_react_banner_day_4.jpg)
+![30 Days of React banner](../images/30_days_of_react_banner_day_6.jpg)
 
-# Mapping lists
+- [Mapping Arrays](#mapping-arrays)
+  - [Mapping and rendering arrays](#mapping-and-rendering-arrays)
+    - [Mapping Array of Numbers](#mapping-array-of-numbers)
+    - [Mapping array of arrays](#mapping-array-of-arrays)
+    - [Mapping array of objects](#mapping-array-of-objects)
+    - [Key in mapping array](#key-in-mapping-array)
+- [Exercises](#exercises)
 
-Before we jump into mapping an array in React, lets see what we do it in pure JavaScritp.
+# Mapping Arrays
 
-[<< Day 4](../04_Day_Component/04_components.md) | [Day 6 >>]()
+Array is the most frequent used data structure to handle many kind of problems. In React, we we map an array and modify to list of JSX by adding a certain HTML elements to each element of the array.
+
+## Mapping and rendering arrays
+
+Most of the time data is in the form of array or array of objects. To render this array or array of objects most of the time we modify the data using _map_. In the previous section, we have rendered the techs list using map. In this section also we will also see more examples.
+
+In the following examples, you will see how we render a number array, a string array, a countries array and skills array on the browser.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+const App = () => {
+  return (
+    <div className='container'>
+      <div>
+        <h1>Numbers List</h1>
+        {[1, 2, 3, 4, 5]}
+      </div>
+    </div>
+  )
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(<App />, rootElement)
+```
+
+If you check the the browser, you will see the numbers are attached together in one line. To avoid this, we modify the array and change the array elements to JSX element. See the example below, the array has been modified to a list JSX elements.
+
+### Mapping Array of Numbers
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const Numbers = ({ numbers }) => {
+  // modifying array to array of li JSX
+  const list = numbers.map((number) => <li>{number}</li>)
+  return list
+}
+
+const App = () => {
+  const numbers = [1, 2, 3, 4, 5]
+
+  return (
+    <div className='container'>
+      <div>
+        <h1>Numbers List</h1>
+        <ul>
+          <Numbers numbers={numbers} />
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(<App />, rootElement)
+```
+
+### Mapping array of arrays
+
+Let's see how to map array of arrays
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const App = () => {
+  const skills = [
+    ['HTML', 10],
+    ['CSS', 7],
+    ['JavaScript', 9],
+    ['React', 8],
+  ]
+
+  // Skill Component
+
+  const Skill = ({ skill: [tech, level] }) => (
+    <li>
+      {tech} {level}
+    </li>
+  )
+
+  // Skills Component
+  const Skills = ({ skills }) => {
+    const skillsList = skills.map((skill) => <Skill skill={skill} />)
+    console.log(skillsList)
+    return <ul>{skillsList}</ul>
+  }
+
+  return (
+    <div className='container'>
+      <div>
+        <h1>Skills Level</h1>
+        <Skills skills={skills} />
+      </div>
+    </div>
+  )
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(<App />, rootElement)
+```
+
+### Mapping array of objects
+
+Rendering array of objects
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const countries = [
+  { name: 'Finland', city: 'Helsinki' },
+  { name: 'Sweden', city: 'Stockholm' },
+  { name: 'Denmark', city: 'Copenhagen' },
+  { name: 'Norway', city: 'Oslo' },
+  { name: 'Iceland', city: 'Reykjavík' },
+]
+
+// Country component
+const Country = ({ country: { name, city } }) => {
+  return (
+    <div>
+      <h1>{name}</h1>
+      <small>{city}</small>
+    </div>
+  )
+}
+
+// countries component
+const Countries = ({ countries }) => {
+  const countryList = countries.map((country) => <Country country={country} />)
+  return <div>{countryList}</div>
+}
+const App = () => (
+  <div className='container'>
+    <div>
+      <h1>Countries List</h1>
+      <Countries countries={countries} />
+    </div>
+  </div>
+)
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(<App />, rootElement)
+```
+
+### Key in mapping array
+
+Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity. Key should be unique. Mostly data has come with an id and we can use id as key. If we do not pass key react raise a warning on the browser. If the data does not have id we have to find a way to create a unique identifier for each elements when we map it. See the following example:
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const Numbers = ({ numbers }) => {
+  // modifying array to array of li JSX
+  const list = numbers.map((num) => <li key={num}>{num}</li>)
+  return list
+}
+
+const App = () => {
+  const numbers = [1, 2, 3, 4, 5]
+
+  return (
+    <div className='container'>
+      <div>
+        <h1>Numbers List</h1>
+        <ul>
+          <Numbers numbers={numbers} />
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(<App />, rootElement)
+```
+
+Let's also add in key in countries mapping example.
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const countries = [
+  { name: 'Finland', city: 'Helsinki' },
+  { name: 'Sweden', city: 'Stockholm' },
+  { name: 'Denmark', city: 'Copenhagen' },
+  { name: 'Norway', city: 'Oslo' },
+  { name: 'Iceland', city: 'Reykjavík' },
+]
+
+// Country component
+const Country = ({ country: { name, city } }) => {
+  return (
+    <div>
+      <h1>{name}</h1>
+      <small>{city}</small>
+    </div>
+  )
+}
+
+// countries component
+const Countries = ({ countries }) => {
+  const countryList = countries.map((country) => (
+    <Country key={country.name} country={country} />
+  ))
+  return <div>{countryList}</div>
+}
+const App = () => (
+  <div className='container'>
+    <div>
+      <h1>Countries List</h1>
+      <Countries countries={countries} />
+    </div>
+  </div>
+)
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(<App />, rootElement)
+```
+
+# Exercises
+
+coming
+
+![Rendering list](images/rendering_list.png)
+
+[<< Day 5](./../05_Day_Props/05_props.md) | [Day 7 >>]()
diff --git a/images/30_days_of_react_banner_day_10.jpg b/images/30_days_of_react_banner_day_10.jpg
new file mode 100644
index 0000000..15f4d1e
Binary files /dev/null and b/images/30_days_of_react_banner_day_10.jpg differ
diff --git a/images/30_days_of_react_banner_day_6.jpg b/images/30_days_of_react_banner_day_6.jpg
new file mode 100644
index 0000000..8ab5748
Binary files /dev/null and b/images/30_days_of_react_banner_day_6.jpg differ
diff --git a/images/30_days_of_react_banner_day_7.jpg b/images/30_days_of_react_banner_day_7.jpg
new file mode 100644
index 0000000..690ed4f
Binary files /dev/null and b/images/30_days_of_react_banner_day_7.jpg differ
diff --git a/images/30_days_of_react_banner_day_8.jpg b/images/30_days_of_react_banner_day_8.jpg
new file mode 100644
index 0000000..bc0a5cd
Binary files /dev/null and b/images/30_days_of_react_banner_day_8.jpg differ
diff --git a/images/30_days_of_react_banner_day_9.jpg b/images/30_days_of_react_banner_day_9.jpg
new file mode 100644
index 0000000..e90b4a4
Binary files /dev/null and b/images/30_days_of_react_banner_day_9.jpg differ