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;