msb-public
/
30-Days-Of-React
mirror of https://github.com/Asabeneh/30-Days-Of-React
2
1
Code Issues Projects Releases Wiki Activity

some changes

Browse Source
pull/72/head
asabeneh 4 years ago
parent d4414230c0
commit a49a312d8c
6 changed files with 12 additions and 157 deletions
Show Stats Download Patch File Download Diff File

9
14_Day_Component_Life_Cycles/14_component_life_cycles.md
Unescape View File

@ -358,11 +358,6 @@ class App extends Component {
} }
renderCountries = () => { renderCountries = () => {
return this.state.data.map((country) => { return this.state.data.map((country) => {
const languageOrLanguages =
country.languages.length > 1 ? 'Langauges' : 'Language'
const formatLanguages = country.languages
.map(({ name }) => name)
.join(', ')
return ( return (
<div> <div>
<div> <div>
@ -371,10 +366,6 @@ class App extends Component {
</div> </div>
<div> <div>
<h1>{country.name}</h1> <h1>{country.name}</h1>
<p>Capital: {country.capital}</p>
<p>
{languageOrLanguages}: {formatLanguages}
</p>
<p>Population: {country.population}</p> <p>Population: {country.population}</p>
</div> </div>
</div> </div>

9
14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js
Unescape View File

@ -30,11 +30,6 @@ class App extends Component {
} }
renderCountries = () => { renderCountries = () => {
return this.state.data.map((country) => { return this.state.data.map((country) => {
const languageOrLanguages =
country.languages.length > 1 ? 'Langauges' : 'Language'
const formatLanguages = country.languages
.map(({ name }) => name)
.join(', ')
return ( return (
<div> <div>
<div> <div>
@ -43,10 +38,6 @@ class App extends Component {
</div> </div>
<div> <div>
<h1>{country.name}</h1> <h1>{country.name}</h1>
<p>Capital: {country.capital}</p>
<p>
{languageOrLanguages}: {formatLanguages}
</p>
<p>Population: {country.population}</p> <p>Population: {country.population}</p>
</div> </div>
</div> </div>

26
18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js
Unescape View File

@ -2,20 +2,7 @@ import React, { Component } from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import axios from 'axios' import axios from 'axios'
const Country = ({ const Country = ({ country: { name, flag, population } }) => {
country: { name, capital, flag, languages, population, currency },
}) => {
const formatedCapital =
capital.length > 0 ? (
<>
<span>Capital: </span>
{capital}
</>
) : (
''
)
const formatLanguage = languages.length > 1 ? `Languages` : `Language`
console.log(languages)
return ( return (
<div className='country'> <div className='country'>
<div className='country_flag'> <div className='country_flag'>
@ -23,18 +10,9 @@ const Country = ({
</div> </div>
<h3 className='country_name'>{name.toUpperCase()}</h3> <h3 className='country_name'>{name.toUpperCase()}</h3>
<div class='country_text'> <div class='country_text'>
<p>{formatedCapital}</p>
<p>
<span>{formatLanguage}: </span>
{languages.map((language) => language.name).join(', ')}
</p>
<p> <p>
<span>Population: </span> <span>Population: </span>
{population.toLocaleString()} {population}
</p>
<p>
<span>Currency: </span>
{currency}
</p> </p>
</div> </div>
</div> </div>

71
18_Fetch_And_Axios/18_fetch_axios.md
Unescape View File

@ -210,20 +210,7 @@ If we use async and await we handle the error using try and catch. Let's apply a
import React, { Component } from 'react' import React, { Component } from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
const Country = ({ const Country = ({ country: { name, flag, population } }) => {
country: { name, capital, flag, languages, population, currency },
}) => {
const formatedCapital =
capital.length > 0 ? (
<>
<span>Capital: </span>
{capital}
</>
) : (
''
)
const formatLanguage = languages.length > 1 ? `Languages` : `Language`
console.log(languages)
return ( return (
<div className='country'> <div className='country'>
<div className='country_flag'> <div className='country_flag'>
@ -231,14 +218,9 @@ const Country = ({
</div> </div>
<h3 className='country_name'>{name.toUpperCase()}</h3> <h3 className='country_name'>{name.toUpperCase()}</h3>
<div class='country_text'> <div class='country_text'>
<p>{formatedCapital}</p>
<p>
<span>{formatLanguage}: </span>
{languages.map((language) => language.name).join(', ')}
</p>
<p> <p>
<span>Population: </span> <span>Population: </span>
{population.toLocaleString()} {population}
</p> </p>
<p> <p>
<span>Currency: </span> <span>Currency: </span>
@ -309,17 +291,6 @@ import axios from 'axios'
const Country = ({ const Country = ({
country: { name, capital, flag, languages, population, currency }, country: { name, capital, flag, languages, population, currency },
}) => { }) => {
const formatedCapital =
capital.length > 0 ? (
<>
<span>Capital: </span>
{capital}
</>
) : (
''
)
const formatLanguage = languages.length > 1 ? `Languages` : `Language`
console.log(languages)
return ( return (
<div className='country'> <div className='country'>
<div className='country_flag'> <div className='country_flag'>
@ -327,19 +298,11 @@ const Country = ({
</div> </div>
<h3 className='country_name'>{name.toUpperCase()}</h3> <h3 className='country_name'>{name.toUpperCase()}</h3>
<div class='country_text'> <div class='country_text'>
<p>{formatedCapital}</p>
<p>
<span>{formatLanguage}: </span>
{languages.map((language) => language.name).join(', ')}
</p>
<p> <p>
<span>Population: </span> <span>Population: </span>
{population.toLocaleString()} {population}
</p>
<p>
<span>Currency: </span>
{currency}
</p> </p>
>
</div> </div>
</div> </div>
) )
@ -393,20 +356,7 @@ import React, { Component } from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import axios from 'axios' import axios from 'axios'
const Country = ({ const Country = ({ country: { name, flag, population } }) => {
country: { name, capital, flag, languages, population, currency },
}) => {
const formatedCapital =
capital.length > 0 ? (
<>
<span>Capital: </span>
{capital}
</>
) : (
''
)
const formatLanguage = languages.length > 1 ? `Languages` : `Language`
console.log(languages)
return ( return (
<div className='country'> <div className='country'>
<div className='country_flag'> <div className='country_flag'>
@ -414,18 +364,9 @@ const Country = ({
</div> </div>
<h3 className='country_name'>{name.toUpperCase()}</h3> <h3 className='country_name'>{name.toUpperCase()}</h3>
<div class='country_text'> <div class='country_text'>
<p>{formatedCapital}</p>
<p>
<span>{formatLanguage}: </span>
{languages.map((language) => language.name).join(', ')}
</p>
<p> <p>
<span>Population: </span> <span>Population: </span>
{population.toLocaleString()} {population}
</p>
<p>
<span>Currency: </span>
{currency}
</p> </p>
</div> </div>
</div> </div>

27
23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md
Unescape View File

@ -36,20 +36,7 @@ import React, { useState, useEffect } from 'react'
import axios from 'axios' import axios from 'axios'
import ReactDOM, { findDOMNode } from 'react-dom' import ReactDOM, { findDOMNode } from 'react-dom'
const Country = ({ const Country = ({ country: { name, flag, population } }) => {
country: { name, capital, flag, languages, population, currency },
}) => {
const formattedCapital =
capital.length > 0 ? (
<>
<span>Capital: </span>
{capital}
</>
) : (
''
)
const formattedLanguage = languages.length > 1 ? `Languages` : `Language`
return ( return (
<div className='country'> <div className='country'>
<div className='country_flag'> <div className='country_flag'>
@ -57,18 +44,9 @@ const Country = ({
</div> </div>
<h3 className='country_name'>{name.toUpperCase()}</h3> <h3 className='country_name'>{name.toUpperCase()}</h3>
<div class='country_text'> <div class='country_text'>
<p>{formattedCapital}</p>
<p>
<span>{formattedLanguage}: </span>
{languages.map((language) => language.name).join(', ')}
</p>
<p> <p>
<span>Population: </span> <span>Population: </span>
{population.toLocaleString()} {population}
</p>
<p>
<span>Currency: </span>
{currency}
</p> </p>
</div> </div>
</div> </div>
@ -118,5 +96,4 @@ ReactDOM.render(<App />, rootElement)
🎉 CONGRATULATIONS ! 🎉 🎉 CONGRATULATIONS ! 🎉
[<< Day 22](../22_Form_Using_Hooks/22_form_using_hooks.md) | [Day 24>>]() [<< Day 22](../22_Form_Using_Hooks/22_form_using_hooks.md) | [Day 24>>]()

27
23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/index.js
Unescape View File

@ -1,21 +1,8 @@
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import axios from 'axios' import axios from 'axios'
import ReactDOM, { findDOMNode } from 'react-dom' import ReactDOM from 'react-dom'
const Country = ({
country: { name, capital, flag, languages, population, currency },
}) => {
const formattedCapital =
capital.length > 0 ? (
<>
<span>Capital: </span>
{capital}
</>
) : (
''
)
const formattedLanguage = languages.length > 1 ? `Languages` : `Language`
const Country = ({ country: { name, flag } }) => {
return ( return (
<div className='country'> <div className='country'>
<div className='country_flag'> <div className='country_flag'>
@ -23,18 +10,8 @@ const Country = ({
</div> </div>
<h3 className='country_name'>{name.toUpperCase()}</h3> <h3 className='country_name'>{name.toUpperCase()}</h3>
<div class='country_text'> <div class='country_text'>
<p>{formattedCapital}</p>
<p>
<span>{formattedLanguage}: </span>
{languages.map((language) => language.name).join(', ')}
</p>
<p> <p>
<span>Population: </span> <span>Population: </span>
{population.toLocaleString()}
</p>
<p>
<span>Currency: </span>
{currency}
</p> </p>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save