Day_6

.gitignore

@@ -1,4 +1,4 @@
 draft.md
 react-for-everyone.md
 component.md
-05_Day_Map_List_Keys
+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)
 
@@ -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)

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)
 ```
 

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)

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 >>]()