blob: b3168b17e5154f077f8147d8bfe2e321d589f7f7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
import axios from 'axios'
import {useEffect, useState} from 'react'
const Notification = (props) => {
const namesOfCountries = props.countries.map(country => {
return <li>{country.name.official}</li>
})
if (props.countries.length <= 10 && props.countries.length > 1) {
return (
<pre>
<ul>
{namesOfCountries}
</ul>
</pre>
)
} else if (props.countries.length > 10) {
return <p>Too many matches, specify another filter</p>
} else if (props.countries.length === 1) {
// retrieve object pertaining to country
const country = props.countries[0]
console.log(props.countries[0])
// extract languages from
let languages = []
for (let value in country.languages) {
languages = languages.concat(<li>{country.languages[value]}</li>)
}
return (
<div>
<h1>{country.name.official}</h1>
<p>capital {country.capital}</p>
<p>area {country.area}</p>
<h3> languages: </h3>
<ul>
{languages}
</ul>
<img src={country.flags.png} alt={country.flags.alt} />
</div>
)
}
}
const App = () => {
const [country, setCountry] = useState('')
const [countries, setCountries] = useState([])
const handleChange = (event) => {
console.log(event.target.value)
setCountry(event.target.value)
}
useEffect( () => {
axios
.get('https://restcountries.com/v3.1/all')
.then(response => {
if(country) {
const filtered = response.data.filter(value =>
value.name.official
.includes(country))
setCountries(filtered)
console.log(countries, countries.length)
}
})
//.catch(response => {
//return null
//})
}, [country, countries]
)
return (
<div>
find countries <input value={country} onChange={handleChange} />
<Notification countries={countries} />
</div>
)
}
export default App;
|
