Skip to content

Commit

Permalink
some changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Asabeneh
Asabeneh committed Oct 23, 2020
1 parent d441423 commit a49a312
Show file tree
Hide file tree
Showing 6 changed files with 12 additions and 157 deletions.
9 changes: 0 additions & 9 deletions 14_Day_Component_Life_Cycles/14_component_life_cycles.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,11 +358,6 @@ class App extends Component {
}
renderCountries = () => {
return this.state.data.map((country) => {
const languageOrLanguages =
country.languages.length > 1 ? 'Langauges' : 'Language'
const formatLanguages = country.languages
.map(({ name }) => name)
.join(', ')
return (
<div>
<div>
Expand All @@ -371,10 +366,6 @@ class App extends Component {
</div>
<div>
<h1>{country.name}</h1>
<p>Capital: {country.capital}</p>
<p>
{languageOrLanguages}: {formatLanguages}
</p>
<p>Population: {country.population}</p>
</div>
</div>
Expand Down
9 changes: 0 additions & 9 deletions 14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,11 +30,6 @@ class App extends Component {
}
renderCountries = () => {
return this.state.data.map((country) => {
const languageOrLanguages =
country.languages.length > 1 ? 'Langauges' : 'Language'
const formatLanguages = country.languages
.map(({ name }) => name)
.join(', ')
return (
<div>
<div>
Expand All @@ -43,10 +38,6 @@ class App extends Component {
</div>
<div>
<h1>{country.name}</h1>
<p>Capital: {country.capital}</p>
<p>
{languageOrLanguages}: {formatLanguages}
</p>
<p>Population: {country.population}</p>
</div>
</div>
Expand Down
26 changes: 2 additions & 24 deletions 18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,17 @@ import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'

const Country = ({
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)
const Country = ({ country: { name, flag, population } }) => {
return (
<div className='country'>
<div className='country_flag'>
<img src={flag} alt={name} />
</div>
<h3 className='country_name'>{name.toUpperCase()}</h3>
<div class='country_text'>
<p>{formatedCapital}</p>
<p>
<span>{formatLanguage}: </span>
{languages.map((language) => language.name).join(', ')}
</p>
<p>
<span>Population: </span>
{population.toLocaleString()}
</p>
<p>
<span>Currency: </span>
{currency}
{population}
</p>
</div>
</div>
Expand Down
71 changes: 6 additions & 65 deletions 18_Fetch_And_Axios/18_fetch_axios.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -210,35 +210,17 @@ If we use async and await we handle the error using try and catch. Let's apply a
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

const Country = ({
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)
const Country = ({ country: { name, flag, population } }) => {
return (
<div className='country'>
<div className='country_flag'>
<img src={flag} alt={name} />
</div>
<h3 className='country_name'>{name.toUpperCase()}</h3>
<div class='country_text'>
<p>{formatedCapital}</p>
<p>
<span>{formatLanguage}: </span>
{languages.map((language) => language.name).join(', ')}
</p>
<p>
<span>Population: </span>
{population.toLocaleString()}
{population}
</p>
<p>
<span>Currency: </span>
Expand Down Expand Up @@ -309,37 +291,18 @@ import axios from 'axios'
const Country = ({
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 (
<div className='country'>
<div className='country_flag'>
<img src={flag} alt={name} />
</div>
<h3 className='country_name'>{name.toUpperCase()}</h3>
<div class='country_text'>
<p>{formatedCapital}</p>
<p>
<span>{formatLanguage}: </span>
{languages.map((language) => language.name).join(', ')}
</p>
<p>
<span>Population: </span>
{population.toLocaleString()}
</p>
<p>
<span>Currency: </span>
{currency}
{population}
</p>
>
</div>
</div>
)
Expand Down Expand Up @@ -393,39 +356,17 @@ import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'

const Country = ({
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)
const Country = ({ country: { name, flag, population } }) => {
return (
<div className='country'>
<div className='country_flag'>
<img src={flag} alt={name} />
</div>
<h3 className='country_name'>{name.toUpperCase()}</h3>
<div class='country_text'>
<p>{formatedCapital}</p>
<p>
<span>{formatLanguage}: </span>
{languages.map((language) => language.name).join(', ')}
</p>
<p>
<span>Population: </span>
{population.toLocaleString()}
</p>
<p>
<span>Currency: </span>
{currency}
{population}
</p>
</div>
</div>
Expand Down
27 changes: 2 additions & 25 deletions 23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,39 +36,17 @@ import React, { useState, useEffect } from 'react'
import axios from 'axios'
import ReactDOM, { findDOMNode } 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, population } }) => {
return (
<div className='country'>
<div className='country_flag'>
<img src={flag} alt={name} />
</div>
<h3 className='country_name'>{name.toUpperCase()}</h3>
<div class='country_text'>
<p>{formattedCapital}</p>
<p>
<span>{formattedLanguage}: </span>
{languages.map((language) => language.name).join(', ')}
</p>
<p>
<span>Population: </span>
{population.toLocaleString()}
</p>
<p>
<span>Currency: </span>
{currency}
{population}
</p>
</div>
</div>
Expand Down Expand Up @@ -118,5 +96,4 @@ ReactDOM.render(<App />, rootElement)

🎉 CONGRATULATIONS ! 🎉


[<< Day 22](../22_Form_Using_Hooks/22_form_using_hooks.md) | [Day 24>>]()
27 changes: 2 additions & 25 deletions 23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,17 @@
import React, { useState, useEffect } from 'react'
import axios from 'axios'
import ReactDOM, { findDOMNode } 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`
import ReactDOM from 'react-dom'

const Country = ({ country: { name, flag } }) => {
return (
<div className='country'>
<div className='country_flag'>
<img src={flag} alt={name} />
</div>
<h3 className='country_name'>{name.toUpperCase()}</h3>
<div class='country_text'>
<p>{formattedCapital}</p>
<p>
<span>{formattedLanguage}: </span>
{languages.map((language) => language.name).join(', ')}
</p>
<p>
<span>Population: </span>
{population.toLocaleString()}
</p>
<p>
<span>Currency: </span>
{currency}
</p>
</div>
</div>
Expand Down

0 comments on commit a49a312

Please sign in to comment.