all feature done.

14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js

@@ -15,46 +15,46 @@ class App extends Component {
     console.log('I am componentDidMount and I will be last to run.')
     const API_URL = 'https://restcountries.eu/rest/v2/all'
     fetch(API_URL)
-      .then((response) => {
+        .then((response) => {
-        return response.json()
+          return response.json()
-      })
+        })
-      .then((data) => {
+        .then((data) => {
-        console.log(data)
+          console.log(data)
-        this.setState({
+          this.setState({
-          data,
+            data,
+          })
+        })
+        .catch((error) => {
+          console.log(error)
         })
-      })
-      .catch((error) => {
-        console.log(error)
-      })
   }
   renderCountries = () => {
     return this.state.data.map((country) => {
       return (
-        <div>
-          <div>
-            {' '}
-            <img src={country.flag} alt={country.name} />{' '}
-          </div>
           <div>
-            <h1>{country.name}</h1>
+            <div>
-            <p>Population: {country.population}</p>
+              {' '}
+              <img src={country.flag} alt={country.name} />{' '}
+            </div>
+            <div>
+              <h1>{country.name}</h1>
+              <p>Population: {country.population}</p>
+            </div>
           </div>
-        </div>
       )
     })
   }
 
   render() {
     return (
-      <div className='App'>
+        <div className='App'>
-        <h1>React Component Life Cycle</h1>
+          <h1>React Component Life Cycle</h1>
-        <h1>Calling API</h1>
+          <h1>Calling API</h1>
-        <div>
+          <div>
-          <p>There are {this.state.data.length} countries in the api</p>
+            <p>There are {this.state.data.length} countries in the api</p>
-          <div className='countries-wrapper'>{this.renderCountries()}</div>
+            <div className='countries-wrapper'>{this.renderCountries()}</div>
+          </div>
         </div>
-      </div>
     )
   }
 }