Day 14 - Fixed unfunctional countries api link and changed boilerplate code and documentation accordingly

14_Day_Component_Life_Cycles/14_component_life_cycles.md

@@ -275,7 +275,7 @@ class App extends Component {
 
   componentDidMount() {
     console.log('I am componentDidMount and I will be last to run.')
-    const API_URL = 'https://restcountries.eu/rest/v2/all'
+    const API_URL = 'https://restcountries.com/v3.1/all'
     fetch(API_URL)
       .then((response) => {
         return response.json()
@@ -303,10 +303,10 @@ class App extends Component {
                <div>
                   <div>
                       {' '}
-                  <img src={country.flag} alt={country.name} />{' '}
+                      <img src={country.flags.png} alt={country.name.official} />{' '}
                   </div>
                   <div>
-                  <h1>{country.name}</h1>
+                      <h1>{country.name.common}</h1>
                       <p>Capital: {country.capital}</p>
                       <p>Population: {country.population}</p>
                   </div>

14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js

@@ -13,7 +13,7 @@ class App extends Component {
 
   componentDidMount() {
     console.log('I am componentDidMount and I will be last to run.')
-    const API_URL = 'https://restcountries.eu/rest/v2/all'
+    const API_URL = 'https://restcountries.com/v3.1/all'
     fetch(API_URL)
       .then((response) => {
         return response.json()
@@ -34,10 +34,11 @@ class App extends Component {
         <div>
           <div>
             {' '}
-            <img src={country.flag} alt={country.name} />{' '}
+            <img src={country.flags.png} alt={country.name.official} />{' '}
           </div>
           <div>
-            <h1>{country.name}</h1>
+            <h1>{country.name.common}</h1>
+            <p>Capital: {country.capital}</p>
             <p>Population: {country.population}</p>
           </div>
         </div>