Skip to content

Commit a49a312

Browse files
AsabenehAsabeneh
committed
some changes
1 parent d441423 commit a49a312

File tree

6 files changed

+12
-157
lines changed

6 files changed

+12
-157
lines changed

‎14_Day_Component_Life_Cycles/14_component_life_cycles.md

-9
Original file line numberDiff line numberDiff line change
@@ -358,11 +358,6 @@ class App extends Component {
358358
}
359359
renderCountries = () => {
360360
return this.state.data.map((country) => {
361-
const languageOrLanguages =
362-
country.languages.length > 1 ? 'Langauges' : 'Language'
363-
const formatLanguages = country.languages
364-
.map(({ name }) => name)
365-
.join(', ')
366361
return (
367362
<div>
368363
<div>
@@ -371,10 +366,6 @@ class App extends Component {
371366
</div>
372367
<div>
373368
<h1>{country.name}</h1>
374-
<p>Capital: {country.capital}</p>
375-
<p>
376-
{languageOrLanguages}: {formatLanguages}
377-
</p>
378369
<p>Population: {country.population}</p>
379370
</div>
380371
</div>

‎14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js

-9
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,6 @@ class App extends Component {
3030
}
3131
renderCountries = () => {
3232
return this.state.data.map((country) => {
33-
const languageOrLanguages =
34-
country.languages.length > 1 ? 'Langauges' : 'Language'
35-
const formatLanguages = country.languages
36-
.map(({ name }) => name)
37-
.join(', ')
3833
return (
3934
<div>
4035
<div>
@@ -43,10 +38,6 @@ class App extends Component {
4338
</div>
4439
<div>
4540
<h1>{country.name}</h1>
46-
<p>Capital: {country.capital}</p>
47-
<p>
48-
{languageOrLanguages}: {formatLanguages}
49-
</p>
5041
<p>Population: {country.population}</p>
5142
</div>
5243
</div>

‎18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js

+2-24
Original file line numberDiff line numberDiff line change
@@ -2,39 +2,17 @@ import React, { Component } from 'react'
22
import ReactDOM from 'react-dom'
33
import axios from 'axios'
44

5-
const Country = ({
6-
country: { name, capital, flag, languages, population, currency },
7-
}) => {
8-
const formatedCapital =
9-
capital.length > 0 ? (
10-
<>
11-
<span>Capital: </span>
12-
{capital}
13-
</>
14-
) : (
15-
''
16-
)
17-
const formatLanguage = languages.length > 1 ? `Languages` : `Language`
18-
console.log(languages)
5+
const Country = ({ country: { name, flag, population } }) => {
196
return (
207
<div className='country'>
218
<div className='country_flag'>
229
<img src={flag} alt={name} />
2310
</div>
2411
<h3 className='country_name'>{name.toUpperCase()}</h3>
2512
<div class='country_text'>
26-
<p>{formatedCapital}</p>
27-
<p>
28-
<span>{formatLanguage}: </span>
29-
{languages.map((language) => language.name).join(', ')}
30-
</p>
3113
<p>
3214
<span>Population: </span>
33-
{population.toLocaleString()}
34-
</p>
35-
<p>
36-
<span>Currency: </span>
37-
{currency}
15+
{population}
3816
</p>
3917
</div>
4018
</div>

‎18_Fetch_And_Axios/18_fetch_axios.md

+6-65
Original file line numberDiff line numberDiff line change
@@ -210,35 +210,17 @@ If we use async and await we handle the error using try and catch. Let's apply a
210210
import React, { Component } from 'react'
211211
import ReactDOM from 'react-dom'
212212

213-
const Country = ({
214-
country: { name, capital, flag, languages, population, currency },
215-
}) => {
216-
const formatedCapital =
217-
capital.length > 0 ? (
218-
<>
219-
<span>Capital: </span>
220-
{capital}
221-
</>
222-
) : (
223-
''
224-
)
225-
const formatLanguage = languages.length > 1 ? `Languages` : `Language`
226-
console.log(languages)
213+
const Country = ({ country: { name, flag, population } }) => {
227214
return (
228215
<div className='country'>
229216
<div className='country_flag'>
230217
<img src={flag} alt={name} />
231218
</div>
232219
<h3 className='country_name'>{name.toUpperCase()}</h3>
233220
<div class='country_text'>
234-
<p>{formatedCapital}</p>
235-
<p>
236-
<span>{formatLanguage}: </span>
237-
{languages.map((language) => language.name).join(', ')}
238-
</p>
239221
<p>
240222
<span>Population: </span>
241-
{population.toLocaleString()}
223+
{population}
242224
</p>
243225
<p>
244226
<span>Currency: </span>
@@ -309,37 +291,18 @@ import axios from 'axios'
309291
const Country = ({
310292
country: { name, capital, flag, languages, population, currency },
311293
}) => {
312-
const formatedCapital =
313-
capital.length > 0 ? (
314-
<>
315-
<span>Capital: </span>
316-
{capital}
317-
</>
318-
) : (
319-
''
320-
)
321-
const formatLanguage = languages.length > 1 ? `Languages` : `Language`
322-
console.log(languages)
323294
return (
324295
<div className='country'>
325296
<div className='country_flag'>
326297
<img src={flag} alt={name} />
327298
</div>
328299
<h3 className='country_name'>{name.toUpperCase()}</h3>
329300
<div class='country_text'>
330-
<p>{formatedCapital}</p>
331-
<p>
332-
<span>{formatLanguage}: </span>
333-
{languages.map((language) => language.name).join(', ')}
334-
</p>
335301
<p>
336302
<span>Population: </span>
337-
{population.toLocaleString()}
338-
</p>
339-
<p>
340-
<span>Currency: </span>
341-
{currency}
303+
{population}
342304
</p>
305+
>
343306
</div>
344307
</div>
345308
)
@@ -393,39 +356,17 @@ import React, { Component } from 'react'
393356
import ReactDOM from 'react-dom'
394357
import axios from 'axios'
395358

396-
const Country = ({
397-
country: { name, capital, flag, languages, population, currency },
398-
}) => {
399-
const formatedCapital =
400-
capital.length > 0 ? (
401-
<>
402-
<span>Capital: </span>
403-
{capital}
404-
</>
405-
) : (
406-
''
407-
)
408-
const formatLanguage = languages.length > 1 ? `Languages` : `Language`
409-
console.log(languages)
359+
const Country = ({ country: { name, flag, population } }) => {
410360
return (
411361
<div className='country'>
412362
<div className='country_flag'>
413363
<img src={flag} alt={name} />
414364
</div>
415365
<h3 className='country_name'>{name.toUpperCase()}</h3>
416366
<div class='country_text'>
417-
<p>{formatedCapital}</p>
418-
<p>
419-
<span>{formatLanguage}: </span>
420-
{languages.map((language) => language.name).join(', ')}
421-
</p>
422367
<p>
423368
<span>Population: </span>
424-
{population.toLocaleString()}
425-
</p>
426-
<p>
427-
<span>Currency: </span>
428-
{currency}
369+
{population}
429370
</p>
430371
</div>
431372
</div>

‎23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md

+2-25
Original file line numberDiff line numberDiff line change
@@ -36,39 +36,17 @@ import React, { useState, useEffect } from 'react'
3636
import axios from 'axios'
3737
import ReactDOM, { findDOMNode } from 'react-dom'
3838

39-
const Country = ({
40-
country: { name, capital, flag, languages, population, currency },
41-
}) => {
42-
const formattedCapital =
43-
capital.length > 0 ? (
44-
<>
45-
<span>Capital: </span>
46-
{capital}
47-
</>
48-
) : (
49-
''
50-
)
51-
const formattedLanguage = languages.length > 1 ? `Languages` : `Language`
52-
39+
const Country = ({ country: { name, flag, population } }) => {
5340
return (
5441
<div className='country'>
5542
<div className='country_flag'>
5643
<img src={flag} alt={name} />
5744
</div>
5845
<h3 className='country_name'>{name.toUpperCase()}</h3>
5946
<div class='country_text'>
60-
<p>{formattedCapital}</p>
61-
<p>
62-
<span>{formattedLanguage}: </span>
63-
{languages.map((language) => language.name).join(', ')}
64-
</p>
6547
<p>
6648
<span>Population: </span>
67-
{population.toLocaleString()}
68-
</p>
69-
<p>
70-
<span>Currency: </span>
71-
{currency}
49+
{population}
7250
</p>
7351
</div>
7452
</div>
@@ -118,5 +96,4 @@ ReactDOM.render(<App />, rootElement)
11896

11997
🎉 CONGRATULATIONS ! 🎉
12098

121-
12299
[<< Day 22](../22_Form_Using_Hooks/22_form_using_hooks.md) | [Day 24>>]()

‎23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/index.js

+2-25
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,17 @@
11
import React, { useState, useEffect } from 'react'
22
import axios from 'axios'
3-
import ReactDOM, { findDOMNode } from 'react-dom'
4-
5-
const Country = ({
6-
country: { name, capital, flag, languages, population, currency },
7-
}) => {
8-
const formattedCapital =
9-
capital.length > 0 ? (
10-
<>
11-
<span>Capital: </span>
12-
{capital}
13-
</>
14-
) : (
15-
''
16-
)
17-
const formattedLanguage = languages.length > 1 ? `Languages` : `Language`
3+
import ReactDOM from 'react-dom'
184

5+
const Country = ({ country: { name, flag } }) => {
196
return (
207
<div className='country'>
218
<div className='country_flag'>
229
<img src={flag} alt={name} />
2310
</div>
2411
<h3 className='country_name'>{name.toUpperCase()}</h3>
2512
<div class='country_text'>
26-
<p>{formattedCapital}</p>
27-
<p>
28-
<span>{formattedLanguage}: </span>
29-
{languages.map((language) => language.name).join(', ')}
30-
</p>
3113
<p>
3214
<span>Population: </span>
33-
{population.toLocaleString()}
34-
</p>
35-
<p>
36-
<span>Currency: </span>
37-
{currency}
3815
</p>
3916
</div>
4017
</div>

0 commit comments

Comments
 (0)