Asabeneh
4 years ago
committed by
momin-riyadh
parent
1d48771c27
commit
0e32f60fe5
@ -1,285 +0,0 @@
|
|||||||
<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 >>](../07_Day_Class_Components/07_class_components.md)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
- [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)
|
|
||||||
- [Exercises: Level 1](#exercises-level-1)
|
|
||||||
- [Exercises: Level 1](#exercises-level-1-1)
|
|
||||||
|
|
||||||
# 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 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
|
|
||||||
|
|
||||||
## Exercises: Level 1
|
|
||||||
|
|
||||||
1. Why you need to map an array ?
|
|
||||||
2. Why we need keys during mapping an array ?
|
|
||||||
3. What is the importance of destructuring your code ?
|
|
||||||
4. Does destructuring make your code clean and easy to read ?
|
|
||||||
|
|
||||||
## Exercises: Level 1
|
|
||||||
|
|
||||||
1. In the following design, evens are green, odds are yellow and prime numbers are red. Build the following colors using React component
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
2. Create the following hexadecimal colors using React component
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
3.Make the following bar group using given [data](../06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/data/ten_most_highest_populations.js)
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
🎉 CONGRATULATIONS ! 🎉
|
|
||||||
|
|
||||||
[<< Day 5](./../05_Day_Props/05_props.md) | [Day 7 >>](../07_Day_Class_Components/07_class_components.md)
|
|
||||||
@ -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*
|
|
||||||
@ -1,5 +0,0 @@
|
|||||||
# 30 Days of React App: Day 3
|
|
||||||
|
|
||||||
In the project directory, you can run to start the project
|
|
||||||
|
|
||||||
### `npm start`
|
|
||||||
@ -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"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -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>
|
|
||||||
File diff suppressed because it is too large
Load Diff
@ -1,13 +0,0 @@
|
|||||||
export const tenHighestPopulation = [
|
|
||||||
{ country: 'World', population: 7693165599 },
|
|
||||||
{ country: 'China', population: 1377422166 },
|
|
||||||
{ country: 'India', population: 1295210000 },
|
|
||||||
{ country: 'United States of America', population: 323947000 },
|
|
||||||
{ country: 'Indonesia', population: 258705000 },
|
|
||||||
{ country: 'Brazil', population: 206135893 },
|
|
||||||
{ country: 'Pakistan', population: 194125062 },
|
|
||||||
{ country: 'Nigeria', population: 186988000 },
|
|
||||||
{ country: 'Bangladesh', population: 161006790 },
|
|
||||||
{ country: 'Russian Federation', population: 146599183 },
|
|
||||||
{ country: 'Japan', population: 126960000 },
|
|
||||||
]
|
|
||||||
|
Before Width: | Height: | Size: 20 KiB |
|
Before Width: | Height: | Size: 82 KiB |
|
Before Width: | Height: | Size: 18 KiB |
|
Before Width: | Height: | Size: 12 KiB |
|
Before Width: | Height: | Size: 40 KiB |
@ -1,113 +0,0 @@
|
|||||||
// index.js
|
|
||||||
|
|
||||||
import React from 'react'
|
|
||||||
import ReactDOM from 'react-dom'
|
|
||||||
|
|
||||||
// class based component
|
|
||||||
class Header extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
// the code inside the constructor run before any other code
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
console.log(this.props.data)
|
|
||||||
const {
|
|
||||||
welcome,
|
|
||||||
title,
|
|
||||||
subtitle,
|
|
||||||
author: { firstName, lastName },
|
|
||||||
date,
|
|
||||||
} = this.props.data
|
|
||||||
|
|
||||||
return (
|
|
||||||
<header>
|
|
||||||
<div className='header-wrapper'>
|
|
||||||
<h1>{welcome}</h1>
|
|
||||||
<h2>{title}</h2>
|
|
||||||
<h3>{subtitle}</h3>
|
|
||||||
<p>
|
|
||||||
{firstName} {lastName}
|
|
||||||
</p>
|
|
||||||
<small>{date}</small>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// TechList Component
|
|
||||||
// class base component
|
|
||||||
class TechList extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
const { techs } = this.props
|
|
||||||
const techsFormatted = techs.map((tech) => <li key={tech}>{tech}</li>)
|
|
||||||
return techsFormatted
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Main Component
|
|
||||||
// Class Component
|
|
||||||
class Main extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<main>
|
|
||||||
<div className='main-wrapper'>
|
|
||||||
<p>Prerequisite to get started react.js:</p>
|
|
||||||
<ul>
|
|
||||||
<TechList techs={this.props.techs} />
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Footer Component
|
|
||||||
// Class component
|
|
||||||
class Footer extends React.Component {
|
|
||||||
constructor(props) {
|
|
||||||
super(props)
|
|
||||||
}
|
|
||||||
render() {
|
|
||||||
return (
|
|
||||||
<footer>
|
|
||||||
<div className='footer-wrapper'>
|
|
||||||
<p>Copyright {this.props.date.getFullYear()}</p>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class App extends React.Component {
|
|
||||||
render() {
|
|
||||||
const data = {
|
|
||||||
welcome: 'Welcome to 30 Days Of React',
|
|
||||||
title: 'Getting Started React',
|
|
||||||
subtitle: 'JavaScript Library',
|
|
||||||
author: {
|
|
||||||
firstName: 'Asabeneh',
|
|
||||||
lastName: 'Yetayeh',
|
|
||||||
},
|
|
||||||
date: 'Oct 7, 2020',
|
|
||||||
}
|
|
||||||
const techs = ['HTML', 'CSS', 'JavaScript']
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='app'>
|
|
||||||
<Header data={data} />
|
|
||||||
<Main techs={techs} />
|
|
||||||
<Footer date={new Date()} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const rootElement = document.getElementById('root')
|
|
||||||
ReactDOM.render(<App />, rootElement)
|
|
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue