Update 25_custom_hooks.md

25_Custom_Hooks/25_custom_hooks.md

@@ -29,17 +29,27 @@ import React, { useState, useEffect } from 'react'
 import axios from 'axios'
 import ReactDOM, { findDOMNode } from 'react-dom'
 
-const Country = ({ country: { name, flag, population } }) => {
+const Country = ({ country: {
+   name: {
+      common: country_name
+   },
+   flags: {
+      png: flag_png,
+      alt: flag_alt
+   },
+   population
+}}) => {
    return (
       <div className='country'>
-      <div className='country_flag'>
-        <img src={flag} alt={name} />
+         <div className='country-flag'>
+            <img src={flag_png} alt={flag_alt}/>
          </div>
-      <h3 className='country_name'>{name.toUpperCase()}</h3>
-      <div class='country_text'>
+         <h3 className='country-name'>{country_name}</h3>
+         <div className='country-details'>
             <p>
-          <span>Population: </span>
-          {population}
+               <span>
+                  Population: {population.toLocaleString()}
+               </span>
             </p>
          </div>
       </div>
@@ -47,21 +57,21 @@ const Country = ({ country: { name, flag, population } }) => {
 }
 
 const App = (props) => {
-  // setting initial state and method to update state
    const [data, setData] = useState([])
 
    useEffect(() => {
-    fetchData()
+      fetchData();
    }, [])
 
    const fetchData = async () => {
-    const url = 'https://restcountries.eu/rest/v2/all'
+      const url = 'https://restcountries.com/v3.1/all'
       try {
-      const response = await fetch(url)
-      const data = await response.json()
-      setData(data)
+         const response = await fetch(url);
+         const data = await response.json();
+         setData(data);
+         console.log(data);
       } catch (error) {
-      console.log(error)
+         console.log(error);
       }
    }
 
@@ -73,7 +83,7 @@ const App = (props) => {
          <p>There are {data.length} countries in the api</p>
          <div className='countries-wrapper'>
             {data.map((country) => (
-            <Country country={country} />
+               <Country country={country}/>
             ))}
          </div>
       </div>