Day_6

5 years ago · a64939aea1
parent 0bb04517d6
commit a64939aea1
32 changed files with 243 additions and 33438 deletions
--- a/03_Day_Setting_Up/30-days-of-react_boilerplate/.gitignore
+++ b/03_Day_Setting_Up/30-days-of-react_boilerplate/.gitignore
@ -1,23 +0,0 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 # dependencies
 /node_modules
 /.pnp
 .pnp.js
 # testing
 /coverage
 # production
 /build
 # misc
 .DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
--- a/03_Day_Setting_Up/30-days-of-react_boilerplate/README.md
+++ b/03_Day_Setting_Up/30-days-of-react_boilerplate/README.md
@ -1,5 +0,0 @@
 # 30 Days of React App: Day 3
 In the project directory, you can run to start the project
 ### `npm start`
--- a/03_Day_Setting_Up/30-days-of-react_boilerplate/package.json
+++ b/03_Day_Setting_Up/30-days-of-react_boilerplate/package.json
@ -1,34 +0,0 @@
 {
  "name": "30-days-of-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
 }
--- a/03_Day_Setting_Up/30-days-of-react_boilerplate/public/index.html
+++ b/03_Day_Setting_Up/30-days-of-react_boilerplate/public/index.html
@ -1,100 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
      rel="stylesheet"
    />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>30 Days Of React App</title>
    <style>
      /* == General style === */
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      html,
      body {
        height: 100%;
        line-height: 1.5;
        font-family: 'Montserrat';
        font-weight: 300;
        color: black;
      }
      .root {
        min-height: 100%;
        position: relative;
      }
      .header-wrapper,
      .main-wrapper,
      .footer-wrapper {
        width: 85%;
        margin: auto;
      }
      .header-wrapper,
      .main-wrapper {
        padding: 10px;
        margin: 2px auto;
      }
      h1 {
        font-size: 70px;
        font-weight: 300;
      }
      h2,
      h3 {
        font-weight: 300;
      }
      header {
        background-color: #61dbfb;
        padding: 25;
        padding: 10px;
      }
      main {
        padding: 10px;
        padding-bottom: 60px;
        /* Height of the footer */
      }
      ul {
        margin-left: 15px;
      }
      ul li {
        list-style: none;
      }
      footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px;
        /* Height of the footer */
        background: #6cf;
      }
      .footer-wrapper {
        font-weight: 400;
        text-align: center;
        line-height: 60px;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
 </html>
--- a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/asabeneh.jpg
+++ b/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/asabeneh.jpg
--- a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/css_logo.png
+++ b/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/css_logo.png
--- a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/html_logo.png
+++ b/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/html_logo.png
--- a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/react_logo.png
+++ b/03_Day_Setting_Up/30-days-of-react_boilerplate/src/images/react_logo.png
--- a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/index.js
+++ b/03_Day_Setting_Up/30-days-of-react_boilerplate/src/index.js
@ -1,101 +0,0 @@
 // index.js
 import React from 'react'
 import ReactDOM from 'react-dom'
 // To get the root element from the HTML document
 import asabenehImage from './images/asabeneh.jpg'
 // JSX element, header
 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 2, 2020'
 // JSX element, header
 const header = (
  <header>
    <div className='header-wrapper'>
      <h1>{welcome}</h1>
      <h2>{title}</h2>
      <h3>{subtitle}</h3>
      <p>
        Instructor: {author.firstName} {author.lastName}
      </p>
      <small>Date: {date}</small>
    </div>
  </header>
 )
 const numOne = 3
 const numTwo = 2
 const result = (
  <p>
    {numOne} + {numTwo} = {numOne + numTwo}
  </p>
 )
 const yearBorn = 1820
 const currentYear = new Date().getFullYear()
 const age = currentYear - yearBorn
 const personAge = (
  <p>
    {' '}
    {author.firstName} {author.lastName} is {age} years old
  </p>
 )
 // JSX element, main
 const techs = ['HTML', 'CSS', 'JavaScript']
 const techsFormatted = techs.map((tech) => <li>{tech}</li>)
 const user = (
  <div>
    <img src={asabenehImage} alt='asabeneh image' />
  </div>
 )
 // JSX element, main
 const main = (
  <main>
    <div className='main-wrapper'>
      <p>
        Prerequisite to get started{' '}
        <strong>
          <em>react.js</em>
        </strong>
        :
      </p>
      <ul>{techsFormatted}</ul>
      {result}
      {personAge}
      {user}
    </div>
  </main>
 )
 const copyRight = 'Copyright 2020'
 // JSX element, footer
 const footer = (
  <footer>
    <div className='footer-wrapper'>
      <p>{copyRight}</p>
    </div>
  </footer>
 )
 // JSX element, app
 const app = (
  <div className='app'>
    {header}
    {main}
    {footer}
  </div>
 )
 const rootElement = document.getElementById('root')
 // we render the JSX element using the ReactDOM package
 ReactDOM.render(app, rootElement)
--- a/03_Day_Setting_Up/30-days-of-react_boilerplate/src/math.js
+++ b/03_Day_Setting_Up/30-days-of-react_boilerplate/src/math.js
@ -1,12 +0,0 @@
 // math.js
 export const addTwo = (a, b) => a + b
 export const multiply = (a, b) => a * b
 export const subtract = (a, b) => a - b
 export default(function doSomeMath() {
  return {
    addTwo,
    multiply,
    subtract,
  }
 })()
--- a/03_Day_Setting_Up/30-days-of-react_boilerplate/yarn.lock
+++ b/03_Day_Setting_Up/30-days-of-react_boilerplate/yarn.lock
--- a/04_Day_Component/30-days-of-react_boilerplate-components/.gitignore
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/.gitignore
@ -1,23 +0,0 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 # dependencies
 /node_modules
 /.pnp
 .pnp.js
 # testing
 /coverage
 # production
 /build
 # misc
 .DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
--- a/04_Day_Component/30-days-of-react_boilerplate-components/README.md
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/README.md
@ -1,5 +0,0 @@
 # 30 Days of React App: Day 3
 In the project directory, you can run to start the project
 ### `npm start`
--- a/04_Day_Component/30-days-of-react_boilerplate-components/package.json
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/package.json
@ -1,34 +0,0 @@
 {
  "name": "30-days-of-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
 }
--- a/04_Day_Component/30-days-of-react_boilerplate-components/public/index.html
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/public/index.html
@ -1,111 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
      rel="stylesheet"
    />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>30 Days Of React App</title>
    <style>
      /* == General style === */
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      html,
      body {
        height: 100%;
        line-height: 1.5;
        font-family: 'Montserrat';
        font-weight: 300;
        color: black;
      }
      .root {
        min-height: 100%;
        position: relative;
      }
      .header-wrapper,
      .main-wrapper,
      .footer-wrapper {
        width: 85%;
        margin: auto;
      }
      .header-wrapper,
      .main-wrapper {
        padding: 10px;
        margin: 2px auto;
      }
      h1 {
        font-size: 70px;
        font-weight: 300;
      }
      h2,
      h3 {
        font-weight: 300;
      }
      header {
        background-color: #61dbfb;
        padding: 25;
        padding: 10px;
      }
      main {
        padding: 10px;
        padding-bottom: 60px;
        /* Height of the footer */
      }
      ul {
        margin-left: 15px;
      }
      ul li {
        list-style: none;
      }
      footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px;
        /* Height of the footer */
        background: #6cf;
      }
      .footer-wrapper {
        font-weight: 400;
        text-align: center;
        line-height: 60px;
      }
      .user-card {
        margin-top: 10px;
      }
      .user-card > img {
        border-radius: 50%;
        width: 14%;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
 </html>
--- a/04_Day_Component/30-days-of-react_boilerplate-components/src/images/asabeneh.jpg
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/src/images/asabeneh.jpg
--- a/04_Day_Component/30-days-of-react_boilerplate-components/src/images/css_logo.png
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/src/images/css_logo.png
--- a/04_Day_Component/30-days-of-react_boilerplate-components/src/images/html_logo.png
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/src/images/html_logo.png
--- a/04_Day_Component/30-days-of-react_boilerplate-components/src/images/react_logo.png
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/src/images/react_logo.png
--- a/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/src/index.js
@ -1,110 +0,0 @@
 // index.js
 import React from 'react'
 import ReactDOM from 'react-dom'
 import asabenehImage from './images/asabeneh.jpg'
 const hexaColor = () => {
  let str = '0123456789abcdef'
  let color = ''
  for (let i = 0; i < 6; i++) {
    let index = Math.floor(Math.random() * str.length)
    color += str[index]
  }
  return '#' + color
 }
 const HexaColor = () => {
  const bgColor = hexaColor()
  const styles = {
    height: '100px',
    display: 'flex',
    'justify-content': 'center',
    'align-items': 'center',
    fontFamily: 'Montserrat',
    margin: '2px auto',
    borderRadius: '5px',
    width: '75%',
    border: '2px solid black',
  }
  return (
    <div style={styles}>
      <h2>{bgColor}</h2>
    </div>
  )
 }
 // Header Component
 const Header = () => (
  <header>
    <div className='header-wrapper'>
      <h1>Welcome to 30 Days Of React</h1>
      <h2>Getting Started React</h2>
      <h3>JavaScript Library</h3>
      <p>Asabeneh Yetayeh</p>
      <small>Oct 3, 2020</small>
    </div>
  </header>
 )
 // User Card Component
 const UserCard = () => (
  <div className='user-card'>
    <img src={asabenehImage} alt='asabeneh image' />
    <h2>Asabeneh Yetayeh</h2>
  </div>
 )
 // TechList Component
 const TechList = () => {
  const techs = ['HTML', 'CSS', 'JavaScript']
  const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
  return techsFormatted
 }
 const buttonStyles = {
  padding: '10px 20px',
  background: 'rgb(0, 255, 0)',
  border: 'none',
  borderRadius: 5,
 }
 const Button = () => <button style={buttonStyles}> action </button>
 // Main Component
 const Main = () => (
  <main>
    <div className='main-wrapper'>
      <p>Prerequisite to get started react.js:</p>
      <ul>
        <TechList />
      </ul>
      <UserCard />
      <div>
        {/* Generate two different hexa colors every time */}
        <HexaColor />
        <HexaColor />
      </div>
    </div>
  </main>
 )
 // Footer Component
 const Footer = () => (
  <footer>
    <div className='footer-wrapper'>
      <p>Copyright 2020</p>
    </div>
  </footer>
 )
 // The App, or the parent or the container component
 const App = () => (
  <div className='app'>
    <Header />
    <Main />
    <Footer />
  </div>
 )
 const rootElement = document.getElementById('root')
 // we render the JSX element using the ReactDOM package
 ReactDOM.render(<App />, rootElement)
--- a/04_Day_Component/30-days-of-react_boilerplate-components/yarn.lock
+++ b/04_Day_Component/30-days-of-react_boilerplate-components/yarn.lock
--- a/05_Day_Props/30-days-of-react_boilerplate-props/.gitignore
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/.gitignore
@ -1,23 +0,0 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 # dependencies
 /node_modules
 /.pnp
 .pnp.js
 # testing
 /coverage
 # production
 /build
 # misc
 .DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
--- a/05_Day_Props/30-days-of-react_boilerplate-props/README.md
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/README.md
@ -1,5 +0,0 @@
 # 30 Days of React App: Day 3
 In the project directory, you can run to start the project
 ### `npm start`
--- a/05_Day_Props/30-days-of-react_boilerplate-props/package.json
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/package.json
@ -1,34 +0,0 @@
 {
  "name": "30-days-of-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
 }
--- a/05_Day_Props/30-days-of-react_boilerplate-props/public/index.html
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/public/index.html
@ -1,111 +0,0 @@
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500|Roboto:300,400,500&display=swap"
      rel="stylesheet"
    />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>30 Days Of React App</title>
    <style>
      /* == General style === */
      * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
      }
      html,
      body {
        height: 100%;
        line-height: 1.5;
        font-family: 'Montserrat';
        font-weight: 300;
        color: black;
      }
      .root {
        min-height: 100%;
        position: relative;
      }
      .header-wrapper,
      .main-wrapper,
      .footer-wrapper {
        width: 85%;
        margin: auto;
      }
      .header-wrapper,
      .main-wrapper {
        padding: 10px;
        margin: 2px auto;
      }
      h1 {
        font-size: 70px;
        font-weight: 300;
      }
      h2,
      h3 {
        font-weight: 300;
      }
      header {
        background-color: #61dbfb;
        padding: 25;
        padding: 10px;
      }
      main {
        padding: 10px;
        padding-bottom: 60px;
        /* Height of the footer */
      }
      ul {
        margin-left: 15px;
      }
      ul li {
        list-style: none;
      }
      footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 60px;
        /* Height of the footer */
        background: #6cf;
      }
      .footer-wrapper {
        font-weight: 400;
        text-align: center;
        line-height: 60px;
      }
      .user-card {
        margin-top: 10px;
      }
      .user-card > img {
        border-radius: 50%;
        width: 14%;
      }
    </style>
  </head>
  <body>
    <div id="root"></div>
  </body>
 </html>
--- a/05_Day_Props/30-days-of-react_boilerplate-props/src/images/asabeneh.jpg
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/src/images/asabeneh.jpg
--- a/05_Day_Props/30-days-of-react_boilerplate-props/src/images/css_logo.png
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/src/images/css_logo.png
--- a/05_Day_Props/30-days-of-react_boilerplate-props/src/images/html_logo.png
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/src/images/html_logo.png
--- a/05_Day_Props/30-days-of-react_boilerplate-props/src/images/react_logo.png
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/src/images/react_logo.png
--- 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
@ -1,154 +0,0 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
 import asabenehImage from './images/asabeneh.jpg'
 // Fuction to show month date year
 const showDate = (time) => {
  const months = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December',
  ]
  const month = months[time.getMonth()].slice(0, 3)
  const year = time.getFullYear()
  const date = time.getDate()
  return ` ${month} ${date}, ${year}`
 }
 // Header Component
 const Header = ({
  data: {
    welcome,
    title,
    subtitle,
    author: { firstName, lastName },
    date,
  },
 }) => {
  return (
    <header>
      <div className='header-wrapper'>
        <h1>{welcome}</h1>
        <h2>{title}</h2>
        <h3>{subtitle}</h3>
        <p>
          {firstName} {lastName}
        </p>
        <small>{showDate(date)}</small>
      </div>
    </header>
  )
 }
 // TechList Component
 const TechList = ({ techs }) => {
  const techList = techs.map((tech) => <li key={tech}>{tech}</li>)
  return techList
 }
 // User Card Component
 const UserCard = ({ user: { firstName, lastName, image } }) => (
  <div className='user-card'>
    <img src={image} alt={firstName} />
    <h2>
      {firstName}
      {lastName}
    </h2>
  </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, greetPeople, handleTime }) => (
  <main>
    <div className='main-wrapper'>
      <p>Prerequisite to get started react.js:</p>
      <ul>
        <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>
 )
 // Footer Component
 const Footer = ({ copyRight }) => (
  <footer>
    <div className='footer-wrapper'>
      <p>Copyright {copyRight.getFullYear()}</p>
    </div>
  </footer>
 )
 // The App, or the parent or the container component
 // Functional Component
 const App = () => {
  const data = {
    welcome: 'Welcome to 30 Days Of React',
    title: 'Getting Started React',
    subtitle: 'JavaScript Library',
    author: {
      firstName: 'Asabeneh',
      lastName: 'Yetayeh',
    },
    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}
        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)
--- a/05_Day_Props/30-days-of-react_boilerplate-props/yarn.lock
+++ b/05_Day_Props/30-days-of-react_boilerplate-props/yarn.lock
--- 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 >>]()