diff --git a/14_Day_Component_Life_Cycles/14_component_life_cycles.md b/14_Day_Component_Life_Cycles/14_component_life_cycles.md index 15679ddf40..fb00594831 100644 --- a/14_Day_Component_Life_Cycles/14_component_life_cycles.md +++ b/14_Day_Component_Life_Cycles/14_component_life_cycles.md @@ -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 (
@@ -371,10 +366,6 @@ class App extends Component {

{country.name}

-

Capital: {country.capital}

-

- {languageOrLanguages}: {formatLanguages} -

Population: {country.population}

diff --git a/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js b/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js index ccda994992..b9f802ecda 100644 --- a/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js +++ b/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js @@ -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 (
@@ -43,10 +38,6 @@ class App extends Component {

{country.name}

-

Capital: {country.capital}

-

- {languageOrLanguages}: {formatLanguages} -

Population: {country.population}

diff --git a/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js index 393f764895..50fdd166f6 100644 --- a/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js +++ b/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js @@ -2,20 +2,7 @@ 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 ? ( - <> - Capital: - {capital} - - ) : ( - '' - ) - const formatLanguage = languages.length > 1 ? `Languages` : `Language` - console.log(languages) +const Country = ({ country: { name, flag, population } }) => { return (
@@ -23,18 +10,9 @@ const Country = ({

{name.toUpperCase()}

-

{formatedCapital}

-

- {formatLanguage}: - {languages.map((language) => language.name).join(', ')} -

Population: - {population.toLocaleString()} -

-

- Currency: - {currency} + {population}

diff --git a/18_Fetch_And_Axios/18_fetch_axios.md b/18_Fetch_And_Axios/18_fetch_axios.md index c50e6744e6..1347430497 100644 --- a/18_Fetch_And_Axios/18_fetch_axios.md +++ b/18_Fetch_And_Axios/18_fetch_axios.md @@ -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 ReactDOM from 'react-dom' -const Country = ({ - country: { name, capital, flag, languages, population, currency }, -}) => { - const formatedCapital = - capital.length > 0 ? ( - <> - Capital: - {capital} - - ) : ( - '' - ) - const formatLanguage = languages.length > 1 ? `Languages` : `Language` - console.log(languages) +const Country = ({ country: { name, flag, population } }) => { return (
@@ -231,14 +218,9 @@ const Country = ({

{name.toUpperCase()}

-

{formatedCapital}

-

- {formatLanguage}: - {languages.map((language) => language.name).join(', ')} -

Population: - {population.toLocaleString()} + {population}

Currency: @@ -309,17 +291,6 @@ import axios from 'axios' const Country = ({ country: { name, capital, flag, languages, population, currency }, }) => { - const formatedCapital = - capital.length > 0 ? ( - <> - Capital: - {capital} - - ) : ( - '' - ) - const formatLanguage = languages.length > 1 ? `Languages` : `Language` - console.log(languages) return (

@@ -327,19 +298,11 @@ const Country = ({

{name.toUpperCase()}

-

{formatedCapital}

-

- {formatLanguage}: - {languages.map((language) => language.name).join(', ')} -

Population: - {population.toLocaleString()} -

-

- Currency: - {currency} + {population}

+ >
) @@ -393,20 +356,7 @@ 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 ? ( - <> - Capital: - {capital} - - ) : ( - '' - ) - const formatLanguage = languages.length > 1 ? `Languages` : `Language` - console.log(languages) +const Country = ({ country: { name, flag, population } }) => { return (
@@ -414,18 +364,9 @@ const Country = ({

{name.toUpperCase()}

-

{formatedCapital}

-

- {formatLanguage}: - {languages.map((language) => language.name).join(', ')} -

Population: - {population.toLocaleString()} -

-

- Currency: - {currency} + {population}

diff --git a/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md b/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md index af72c70e5e..8e26992174 100644 --- a/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md +++ b/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md @@ -36,20 +36,7 @@ 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 ? ( - <> - Capital: - {capital} - - ) : ( - '' - ) - const formattedLanguage = languages.length > 1 ? `Languages` : `Language` - +const Country = ({ country: { name, flag, population } }) => { return (
@@ -57,18 +44,9 @@ const Country = ({

{name.toUpperCase()}

-

{formattedCapital}

-

- {formattedLanguage}: - {languages.map((language) => language.name).join(', ')} -

Population: - {population.toLocaleString()} -

-

- Currency: - {currency} + {population}

@@ -118,5 +96,4 @@ ReactDOM.render(, rootElement) 🎉 CONGRATULATIONS ! 🎉 - [<< Day 22](../22_Form_Using_Hooks/22_form_using_hooks.md) | [Day 24>>]() diff --git a/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/index.js b/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/index.js index dfcbd9347d..b57364acad 100644 --- a/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/index.js +++ b/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/index.js @@ -1,21 +1,8 @@ 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 ? ( - <> - Capital: - {capital} - - ) : ( - '' - ) - const formattedLanguage = languages.length > 1 ? `Languages` : `Language` +import ReactDOM from 'react-dom' +const Country = ({ country: { name, flag } }) => { return (
@@ -23,18 +10,8 @@ const Country = ({

{name.toUpperCase()}

-

{formattedCapital}

-

- {formattedLanguage}: - {languages.map((language) => language.name).join(', ')} -

Population: - {population.toLocaleString()} -

-

- Currency: - {currency}