Update 25_custom_hooks.md

25_Custom_Hooks/25_custom_hooks.md

@@ -29,55 +29,65 @@ 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: {
-  return (
+   name: {
-    <div className='country'>
+      common: country_name
-      <div className='country_flag'>
+   },
-        <img src={flag} alt={name} />
+   flags: {
-      </div>
+      png: flag_png,
-      <h3 className='country_name'>{name.toUpperCase()}</h3>
+      alt: flag_alt
-      <div class='country_text'>
+   },
-        <p>
+   population
-          <span>Population: </span>
+}}) => {
-          {population}
+   return (
-        </p>
+      <div className='country'>
+         <div className='country-flag'>
+            <img src={flag_png} alt={flag_alt}/>
+         </div>
+         <h3 className='country-name'>{country_name}</h3>
+         <div className='country-details'>
+            <p>
+               <span>
+                  Population: {population.toLocaleString()}
+               </span>
+            </p>
+         </div>
       </div>
-    </div>
+   )
-  )
 }
 
 const App = (props) => {
-  // setting initial state and method to update state
+   const [data, setData] = useState([])
-  const [data, setData] = useState([])
 
-  useEffect(() => {
+   useEffect(() => {
-    fetchData()
+      fetchData();
-  }, [])
+   }, [])
 
-  const fetchData = async () => {
+   const fetchData = async () => {
-    const url = 'https://restcountries.eu/rest/v2/all'
+      const url = 'https://restcountries.com/v3.1/all'
-    try {
+      try {
-      const response = await fetch(url)
+         const response = await fetch(url);
-      const data = await response.json()
+         const data = await response.json();
-      setData(data)
+         setData(data);
-    } catch (error) {
+         console.log(data);
-      console.log(error)
+      } catch (error) {
-    }
+         console.log(error);
-  }
+      }
+   }
 
-  return (
+   return (
-    <div className='App'>
+   <div className='App'>
       <h1>Fetching Data Using Hook</h1>
       <h1>Calling API</h1>
       <div>
-        <p>There are {data.length} countries in the api</p>
+         <p>There are {data.length} countries in the api</p>
-        <div className='countries-wrapper'>
+         <div className='countries-wrapper'>
-          {data.map((country) => (
+            {data.map((country) => (
-            <Country country={country} />
+               <Country country={country}/>
-          ))}
+            ))}
-        </div>
+         </div>
       </div>
-    </div>
+   </div>
   )
 }