Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/Savy011/fullstackopen-exercises. My Exercise Submissions for FullStack Open fullstackopen.com/en
Something went wrong. Try again.
1.7 kB · 63 lines
JavaScript
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import { useState, useEffect } from "react"import axios from "axios"import Details from "./components/Details"
const App = () => { const [ allCountries, setAllCountries ] = useState([]) const [ displayCountry, setDisplayCountry ] = useState([]) const [ display, setDisplay ] = useState(false) const [ search, setSearch ] = useState('')
useEffect(() => { axios .get('https://restcountries.com/v3/all') .then(response => { setAllCountries(response.data.map( ({ name, capital, population, area, region, subregion, languages, flag, flags }) => ({ name: name.common, emoji: flag, capital, population, area, region, subregion, languages, flags }))) }) }, []) const searchResults = allCountries.filter(item => item.name.toLowerCase().includes(search.toLowerCase()))
const handleSearch = (event) => { setSearch(event.target.value) setDisplay(false) }
const handleClick = (country) => { setDisplayCountry(country) setDisplay(true) }
return ( <div> Search Countries: <input value={search} onChange={handleSearch} /> <br />
{searchResults.length > 10 && <p>Too Many Results to Show, Please specify query</p>} {searchResults.length < 10 && searchResults.length > 1 && searchResults.map(country => ( <div> <li key={country.name}> {country.name} <button onClick={() => handleClick(country)}>Show</button> </li> </div> ))} {searchResults.length === 1 && ( <div> <Details country={searchResults[0]} /> </div> )} { display ? (displayCountry.length !== 0 ? <Details country={displayCountry}/> : null) : null}
</div> )}
export default App