From 3b4e26e89b6ea0f7f7a627200c5246a5b1684a25 Mon Sep 17 00:00:00 2001 From: asabeneh Date: Wed, 14 Oct 2020 04:00:50 +0300 Subject: [PATCH] Day_14 has been added --- .gitignore | 1 + .../src/index.js | 113 ++++++++---------- 2 files changed, 54 insertions(+), 60 deletions(-) diff --git a/.gitignore b/.gitignore index fa79e16..a2d30ce 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ draft.md react-for-everyone.md component.md +draft diff --git a/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js b/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js index 4954c52..ccda994 100644 --- a/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js +++ b/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js @@ -2,74 +2,67 @@ import React, { Component } from 'react' import ReactDOM from 'react-dom' class App extends Component { - firstName = React.createRef() - lastName = React.createRef() - country = React.createRef() - title = React.createRef() - - handleSubmit = (e) => { - // stops the default behavior of form element specifically refreshing of page - e.preventDefault() - - console.log(this.firstName.current.value) - console.log(this.lastName.current.value) - console.log(this.title.current.value) - console.log(this.country.current.value) - - const data = { - firstName: this.firstName.current.value, - lastName: this.lastName.current.value, - title: this.title.current.value, - country: this.country.current.value, + constructor(props) { + super(props) + console.log('I am the constructor and I will be the first to run.') + this.state = { + firstName: 'John', + data: [], } - // the is the place we connect backend api to send the data to the database - console.log(data) } - render() { - return ( -
-

Add Student

-
-
- -
-
- -
+ componentDidMount() { + 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) => { + return response.json() + }) + .then((data) => { + console.log(data) + this.setState({ + data, + }) + }) + .catch((error) => { + console.log(error) + }) + } + renderCountries = () => { + return this.state.data.map((country) => { + const languageOrLanguages = + country.languages.length > 1 ? 'Langauges' : 'Language' + const formatLanguages = country.languages + .map(({ name }) => name) + .join(', ') + return ( +
- + {' '} + {country.name}{' '}
- +

{country.name}

+

Capital: {country.capital}

+

+ {languageOrLanguages}: {formatLanguages} +

+

Population: {country.population}

+
+ ) + }) + } - -
+ render() { + return ( +
+

React Component Life Cycle

+

Calling API

+
+

There are {this.state.data.length} countries in the api

+
{this.renderCountries()}
+
) }