fix conflict

.gitignore

@@ -1,5 +1,4 @@
 draft.md
 react-for-everyone.md
 component.md
-05_Day_Map_List_Keys
-.idea/
+06_Day_Map_List_Keys

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)

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)

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)
 
@@ -88,7 +88,7 @@ class Parent {
   }
 }
 
-const p1 = Parent('Asabeneh', 'Yetayeh', 'Finland', 'FullStack Developer')
+const p1 = new Parent('Asabeneh', 'Yetayeh', 'Finland', 'FullStack Developer')
 
 class Child extends Parent {
   constructor(firstName, lastName, country, title, skills) {
@@ -105,12 +105,14 @@ class Child extends Parent {
   }
 }
 
+const skills = ['HTML', 'CSS', 'JS', 'React']
+
 const child = new Child(
   'Asabeneh',
   'Yetayeh',
   'Finland',
   'FullStack Developer',
-  ['HTML', 'CSS', 'JS', 'React']
+  skills
 )
 ```
 
@@ -280,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)
 ```
 
@@ -320,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)
 ```
 
@@ -428,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)
 ```
 
@@ -474,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)
 ```
 
@@ -497,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)

05_Day_Props/05_props.md

@@ -38,13 +38,13 @@
 
 ## Props in Functional Component
 
-In the previous day, we saw how to inject dynamic data types to React component JSX. Now, let us see how we use dynamic data in component and also how to pass data as props.
+In the previous day, we saw how to inject different data types to React component JSX. Now, let us see how we use it in component and also how to pass different data as props.
 
 ## What is props?
 
-Props is a special keyword in React that stands for properties and is being used to pass data from one component another and mostly from parent component to child component.
+Props is a special keyword in React that stands for properties and is being used to pass data from one component to another and mostly from parent component to child component. We can say props is a data carrier or a means to transport data.
 
-I hope you are familiar with JavaScript function. Most of the time, functions with parameters are smart and they can take dynamic data likewise props is a way we pass data or parameter to a component. Let's see the deference between a function and a component.
+I hope you are familiar with JavaScript function. Most of the time, functions with parameters are smart and they can take dynamic data likewise props is a way we pass data or parameter to a component. Let's see the difference between a function and a component.
 
 ```js
 // function syntax
@@ -71,7 +71,7 @@ const User = (props) => {
     </div>
   )
 }
-// calling or instantiating a component
+// calling or instantiating a component, this component has three properties and we call them props:firstName, lastName, country
 <User firstName = 'Asabeneh', lastName='Yetayeh' country = 'Finland' />
 ```
 
@@ -103,10 +103,12 @@ const Header = () => (
 )
 ```
 
-Instead of injecting data we can also pass the data as a props. React props is similar to parameters in function. React props is an object which you get instantly when you create a component. Before that let's check what do we get in the props object.
+Instead of injecting data we can also pass the data as a props. React props is similar to parameters in function.
 
 ## Props object
 
+React props is an object which you get instantly when you create a React component. Before we pass properties to the component, let's check what do we get in the props object.
+
 ```js
 import React from 'react'
 import ReactDOM from 'react-dom'
@@ -128,6 +130,7 @@ const Header = (props) => {
     </header>
   )
 }
+
 // The App, or the parent or the container component
 // Functional Component
 const App = () => {
@@ -143,9 +146,9 @@ const rootElement = document.getElementById('root')
 ReactDOM.render(<App />, rootElement)
 ```
 
-In the above console.log(props), you would get an empty object({}). That means if you do not pass any attribute to when you instantiate the component the props will be empty otherwise it will be populated with the data you passed as attributes and the proper name of these attributes are props.
+In the above console.log(props), you would get an empty object({}). That means if you do not pass any attributes or properties when you instantiate the component, the props will be empty otherwise it will be populated with the data you passed as attributes and the proper name of these attributes are props.
 
-Let's start with a simple example. In the example below, the welcome message data injected as props in the Header components.
+Let's start with a simple example. In the example below, the welcome string has been passed as props in the Header components.
 
 ```js
 import React from 'react'
@@ -174,11 +177,11 @@ const App = () => {
 }
 
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
+
 ReactDOM.render(<App />, rootElement)
 ```
 
-Now, when you do console.log(props) you should get the following object, that means all the props we passed to the Header component can be found a props object.
+Now, when you do console.log(props) you should get the following object, that means the welcome property we passed to the Header component can be found inside the props object.
 
 ```js
 {
@@ -186,9 +189,7 @@ Now, when you do console.log(props) you should get the following object, that me
 }
 ```
 
-As you can see in the above code, the data passed as props to Header component.
-
-A component has one or many props. Props could be a string, number, boolean, array, object or a function. We will cover differ different kind of props in this sections.
+As you can see in the above code, we passed only a single props to Header component, the welcome props. A component can have one or many props. Props could be different data types. It could be a string, number, boolean, array, object or a function. We will cover different kind of props in the next sections.
 
 ### Different data type props
 
@@ -234,7 +235,6 @@ const App = () => (
 )
 
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -253,7 +253,7 @@ welcome: "Welcome to 30 Days Of React"
 
 Since you are a JavaScript ninja by now, you know what do do with this object.
 
-As you can see from the above example, the value of the props are written statically. However, if we want to apply some logic it is hard to implement with statically written data, so it better to use a variable as props. Let's see the following example:
+As you can see from the above example, the value of the props are written statically. However, if we want to apply some logic it is hard to implement with statically written data, so it will be better to use a variable as props. Let's see the following example:
 
 ```js
 import React from 'react'
@@ -298,7 +298,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -332,7 +331,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -355,7 +353,7 @@ const Status = (props) => {
 const App = () => {
   let currentYear = 2020
   let birthYear = 2015
-  const age = currentYear - birthYear // 200 years
+  const age = currentYear - birthYear // 15 years
 
   let status = age >= 18
 
@@ -366,7 +364,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -512,7 +509,7 @@ const App = () => {
       firstName: 'Asabeneh',
       lastName: 'Yetayeh',
     },
-    date: new Date(),
+    date: new Date(), // date needs to be formatted to a human readable format
   }
 
   return (
@@ -522,11 +519,10 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
-When we use object as props we usually destructure the data to access the values. Destructuring make our code easy to read. We will see soon destructuring of props but before that let's see function as a props for a React component.
+When we use object as props we usually destructure the data to access the values. Destructuring makes our code easy to read. We will see soon destructuring of props but before that let's see function as a props for a React component.
 
 ### Function prop types
 
@@ -536,28 +532,57 @@ We can pass function as prop type to a React component. Let's see examples
 import React from 'react'
 import ReactDOM from 'react-dom'
 
-// Function to display time in Mon date, year format eg Oct 4, 2020
-const showDate = (time) => {
-  const months = [
-    'January',
-    'February',
-    'March',
-    'April',
-    'May',
-    'June',
-    'July',
-    'August',
-    'September',
-    'October',
-    'November',
-    'December',
-  ]
+// A button component
 
-  const month = months[time.getMonth()].slice(0, 3)
-  const year = time.getFullYear()
-  const date = time.getDate()
-  return ` ${month} ${date}, ${year}`
+const Button = (props) => <button onClick={props.onClick}>{props.text}</button>
+
+// The App, or the parent or the container component
+// Functional Component
+const App = () => {
+  const sayHi = () => {
+    alert('Hi')
+  }
+
+  return (
+    <div className='app'>
+      <Button text='Say Hi' onClick={sayHi} />
+    </div>
+  )
 }
+const rootElement = document.getElementById('root')
+// we render the JSX element using the ReactDOM package
+ReactDOM.render(<App />, rootElement)
+```
+
+Even we can write function inside the curly bracket
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+// A button component
+
+const Button = (props) => <button onClick={props.onClick}>{props.text}</button>
+
+// The App, or the parent or the container component
+// Functional Component
+const App = () => {
+  return (
+    <div className='app'>
+      <Button text='Say Hi' onClick={() => alert('Hi')} />
+    </div>
+  )
+}
+const rootElement = document.getElementById('root')
+// we render the JSX element using the ReactDOM package
+ReactDOM.render(<App />, rootElement)
+```
+
+Now, lets implement different functions as a props
+
+```js
+import React from 'react'
+import ReactDOM from 'react-dom'
 
 // A button component
 
@@ -573,11 +598,11 @@ const App = () => {
   return (
     <div className='app'>
       <Button text='Greet People' onClick={greetPeople} />
+      <Button text='Show Time' onClick={() => alert(new Date())} />
     </div>
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -624,15 +649,17 @@ const App = () => {
   const handleTime = () => {
     alert(showDate(new Date()))
   }
-
+  const greetPeople = () => {
+    alert('Welcome to 30 Days Of React Challenge, 2020')
+  }
   return (
     <div className='app'>
       <Button text='show time' onClick={handleTime} />
+      <Button text='Greet People' onClick={greetPeople} />
     </div>
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -786,7 +813,6 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
@@ -863,12 +889,11 @@ const App = () => {
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 
 Now, let's destructure all the components we had and assemble them together. We pass props from one component to another typically from parent to a child component.
-For instance in the Main component techs and user props have been passed from the parent component Main to child components TechList and UserCard. Below, you will get all the codes destructured and cleaned.
+For instance in the Main component techs, user, greetPeople and handleTime props have been passed from the parent component Main to child components TechList and UserCard. Below, you will get all the codes destructured and cleaned.
 
 ```js
 import React from 'react'
@@ -941,8 +966,28 @@ const UserCard = ({ user: { firstName, lastName, image } }) => (
   </div>
 )
 
+// A button component
+
+const Button = ({ text, onClick, style }) => (
+  <button style={style} onClick={onClick}>
+    {text}
+  </button>
+)
+
+// CSS styles in JavaScript Object
+const buttonStyles = {
+  backgroundColor: '#61dbfb',
+  padding: 10,
+  border: 'none',
+  borderRadius: 5,
+  margin: 3,
+  cursor: 'pointer',
+  fontSize: 18,
+  color: 'white',
+}
+
 // Main Component
-const Main = ({ user, techs }) => (
+const Main = ({ user, techs, greetPeople, handleTime }) => (
   <main>
     <div className='main-wrapper'>
       <p>Prerequisite to get started react.js:</p>
@@ -950,6 +995,8 @@ const Main = ({ user, techs }) => (
         <TechList techs={techs} />
       </ul>
       <UserCard user={user} />
+      <Button text='Greet People' onClick={greetPeople} style={buttonStyles} />
+      <Button text='Show Time' onClick={handleTime} style={buttonStyles} />
     </div>
   </main>
 )
@@ -958,7 +1005,7 @@ const Main = ({ user, techs }) => (
 const Footer = ({ copyRight }) => (
   <footer>
     <div className='footer-wrapper'>
-      <p>{copyRight.getFullYear()}</p>
+      <p>Copyright {copyRight.getFullYear()}</p>
     </div>
   </footer>
 )
@@ -974,111 +1021,34 @@ const App = () => {
       firstName: 'Asabeneh',
       lastName: 'Yetayeh',
     },
-    date: new Date(),
+    date: new Date(), // date needs to be formatted to a human readable format
   }
   const date = new Date()
   const techs = ['HTML', 'CSS', 'JavaScript']
   // copying the author from data object to user variable using spread operator
   const user = { ...data.author, image: asabenehImage }
 
+  const handleTime = () => {
+    alert(showDate(new Date()))
+  }
+  const greetPeople = () => {
+    alert('Welcome to 30 Days Of React Challenge, 2020')
+  }
+
   return (
     <div className='app'>
       <Header data={data} />
-      <Main user={user} techs={techs} />
+      <Main
+        user={user}
+        techs={techs}
+        handleTime={handleTime}
+        greetPeople={greetPeople}
+      />
       <Footer copyRight={date} />
     </div>
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
-ReactDOM.render(<App />, rootElement)
-```
-
-```js
-import React from 'react'
-import ReactDOM from 'react-dom'
-
-const welcome = 'Welcome to 30 Days Of React'
-const title = 'Getting Started React'
-const subtitle = 'JavaScript Library'
-const author = {
-  firstName: 'Asabeneh',
-  lastName: 'Yetayeh',
-}
-const date = 'Oct 4, 2020'
-
-const copyRight = 'Copyright 2020'
-const techs = ['HTML', 'CSS', 'JavaScript']
-
-// Header Component
-const Header = (props) => (
-  <header>
-    <div className='header-wrapper'>
-      <h1>{props.title}</h1>
-      <h2>{props.subtitle}</h2>
-      <h3>
-        {props.author.firstName} {props.author.lastName}
-      </h3>
-      <p>{props.date}</p>
-    </div>
-  </header>
-)
-
-// User Card Component
-const UserCard = ({ firstName, lastName, image }) => (
-  <div className='user-card'>
-    <img src={image} alt={firstName} />
-    <h2>
-      {firstName}
-      {lastName}
-    </h2>
-  </div>
-)
-
-// TechList Component
-const TechList = (props) => {
-  const techsFormatted = props.techs.map((tech) => <li key={tech}>{tech}</li>)
-  return techsFormatted
-}
-
-// Main Component
-const Main = () => (
-  <main>
-    <div className='main-wrapper'>
-      <p>Prerequisite to get started react.js:</p>
-      <ul>
-        <TechList techs={techs} />
-      </ul>
-    </div>
-  </main>
-)
-
-// Footer Component
-const Footer = (props) => (
-  <footer>
-    <div className='footer-wrapper'>
-      <p>{props.copyRight}</p>
-    </div>
-  </footer>
-)
-
-// The App, or the parent or the container component
-const App = () => (
-  <div className='app'>
-    <Header
-      welcome={welcome}
-      title={title}
-      subtitle={subtitle}
-      author={author}
-      date={date}
-    />
-    <Main />
-    <Footer copyRight={copyRight} />
-  </div>
-)
-
-const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
 ```
 

05_Day_Props/05_props_boilerplate/src/index.js

@@ -68,8 +68,27 @@ const UserCard = ({ user: { firstName, lastName, image } }) => (
   </div>
 )
 
+// A button component
+
+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 }) => (
+const Main = ({ user, techs, greetPeople, handleTime }) => (
   <main>
     <div className='main-wrapper'>
       <p>Prerequisite to get started react.js:</p>
@@ -77,6 +96,8 @@ const Main = ({ user, techs }) => (
         <TechList techs={techs} />
       </ul>
       <UserCard user={user} />
+      <Button text='Greet People' onClick={greetPeople} style={buttonStyles} />
+      <Button text='Show Time' onClick={handleTime} style={buttonStyles} />
     </div>
   </main>
 )
@@ -85,7 +106,7 @@ const Main = ({ user, techs }) => (
 const Footer = ({ copyRight }) => (
   <footer>
     <div className='footer-wrapper'>
-      <p>{copyRight.getFullYear()}</p>
+      <p>Copyright {copyRight.getFullYear()}</p>
     </div>
   </footer>
 )
@@ -101,21 +122,32 @@ const App = () => {
       firstName: 'Asabeneh',
       lastName: 'Yetayeh',
     },
-    date: new Date(),
+    date: new Date(), // date needs to be formatted to a human readable format
   }
   const date = new Date()
   const techs = ['HTML', 'CSS', 'JavaScript']
   // copying the author from data object to user variable using spread operator
   const user = { ...data.author, image: asabenehImage }
 
+  const handleTime = () => {
+    alert(showDate(new Date()))
+  }
+  const greetPeople = () => {
+    alert('Welcome to 30 Days Of React Challenge, 2020')
+  }
+
   return (
     <div className='app'>
       <Header data={data} />
-      <Main user={user} techs={techs} />
+      <Main
+        user={user}
+        techs={techs}
+        handleTime={handleTime}
+        greetPeople={greetPeople}
+      />
       <Footer copyRight={date} />
     </div>
   )
 }
 const rootElement = document.getElementById('root')
-// we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)

06_Day_Map_List_Keys/05_map_list_keys.md

@@ -0,0 +1,263 @@
+<div align="center">
+  <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>
+  <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 5](./../05_Day_Props/05_props.md) | [Day 7 >>]()
+
+![30 Days of React banner](../images/30_days_of_react_banner_day_6.jpg)
+
+- [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 arrays](#key-in-mapping-arrays)
+- [Exercises](#exercises)
+
+# Mapping arrays
+
+Array is the most frequently used data structure to handle many kind of problems. In React, we use map to modify an array 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 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
+}
+
+// App component
+
+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>
+  }
+
+  const App = () => {
+      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>
+}
+// App component
+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 arrays
+
+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 soon ...
+
+[<< Day 5](./../05_Day_Props/05_props.md) | [Day 7 >>]()

readMe.md

@@ -28,6 +28,7 @@
 | 03    |                                   [Setting Up](./03_Day_Setting_Up/03_day_setting_up.md)                                    |
 | 04    |                                      [Components](./04_Day_Component/04_components.md)                                      |
 | 05    |                                             [Props](./05_Day_Props/05_props.md)                                             |
+| 06   |                                             [List, Map and Keys](./06_Day_Map_List_Keys/05_map_list_keys.md)                                             |
 
 🧡🧡🧡 HAPPY CODING 🧡🧡🧡<div>
 <small>Support [**Asabeneh**](https://www.patreon.com/asabeneh?fan_landing=true) to create more educational materials</small>