day 19 has been published

18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/README.md

@@ -0,0 +1,5 @@
+# 30 Days of React App: Day 19
+
+In the project directory, you can run to start the project
+
+### `npm start`

18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js

@@ -0,0 +1,84 @@
+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)
+  return (
+    <div className='country'>
+      <div className='country_flag'>
+        <img src={flag} alt={name} />
+      </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}
+        </p>
+      </div>
+    </div>
+  )
+}
+
+class App extends Component {
+  state = {
+    data: [],
+  }
+
+  componentDidMount() {
+    this.fetchCountryData()
+  }
+  fetchCountryData = async () => {
+    const url = 'https://restcountries.eu/rest/v2/all'
+    try {
+      const response = await axios.get(url)
+      const data = await response.data
+      this.setState({
+        data,
+      })
+    } catch (error) {
+      console.log(error)
+    }
+  }
+
+  render() {
+    return (
+      <div className='App'>
+        <h1>React Component Life Cycle</h1>
+        <h1>Calling API</h1>
+        <div>
+          <p>There are {this.state.data.length} countries in the api</p>
+          <div className='countries-wrapper'>
+            {this.state.data.map((country) => (
+              <Country country={country} />
+            ))}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+const rootElement = document.getElementById('root')
+ReactDOM.render(<App />, rootElement)