From a49a312d8cbaaac4d9a3e09bcd790642c27d037f Mon Sep 17 00:00:00 2001
From: asabeneh <asabeneh@gmail.com>
Date: Fri, 23 Oct 2020 14:06:00 +0300
Subject: [PATCH] some changes

---
 .../14_component_life_cycles.md               |  9 ---
 .../src/index.js                              |  9 ---
 .../src/index.js                              | 26 +------
 18_Fetch_And_Axios/18_fetch_axios.md          | 71 ++-----------------
 .../23_fetching_data_using_hooks.md           | 27 +------
 .../src/index.js                              | 27 +------
 6 files changed, 12 insertions(+), 157 deletions(-)

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 15679dd..fb00594 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 (
         <div>
           <div>
@@ -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>
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 ccda994..b9f802e 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 (
         <div>
           <div>
@@ -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>
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 393f764..50fdd16 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 ? (
-      <>
-        <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'>
@@ -23,18 +10,9 @@ const Country = ({
       </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>
diff --git a/18_Fetch_And_Axios/18_fetch_axios.md b/18_Fetch_And_Axios/18_fetch_axios.md
index c50e674..1347430 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 ? (
-      <>
-        <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'>
@@ -231,14 +218,9 @@ const Country = ({
       </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>
@@ -309,17 +291,6 @@ 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'>
@@ -327,19 +298,11 @@ const Country = ({
       </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>
   )
@@ -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 ? (
-      <>
-        <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'>
@@ -414,18 +364,9 @@ const Country = ({
       </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>
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 af72c70..8e26992 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 ? (
-      <>
-        <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'>
@@ -57,18 +44,9 @@ const Country = ({
       </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>
@@ -118,5 +96,4 @@ ReactDOM.render(<App />, 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 dfcbd93..b57364a 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 ? (
-      <>
-        <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'>
@@ -23,18 +10,8 @@ const Country = ({
       </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>