text: import * as React from 'react'
  import { useState } from 'react'
  import './App.css'
  import axios from 'axios'
  import SearchBox from './components/SearchBox'
  import SearchHits from './components/SearchHits'
  import CountryDetail from './components/CountryDetail'
  
  const App = () => {
      const [searchText, setSearchText] = useState('')
      const [hitCountries, setHitCountries] = useState([])
      const [countryToShow, setCountryToShow] = useState(null)
  
      const showCountryDetail = countryToShow !== null
  
      const handleSearchTextChange = event => {
          const newSearchText = event.target.value
  
          axios
              .get(`https://restcountries.eu/rest/v2/name/${newSearchText}`)
              .then(response => {
                  setHitCountries(response.data)
              })
              .catch(() => {
                  setHitCountries([])
              })
  
          setSearchText(newSearchText)
      }
  
      const handleHitsShowButtonClicked = event => {
          const numericCode = event.target.value
          setCountryToShow(
              hitCountries.filter(
                  country => country.numericCode === numericCode
              )[0]
          )
      }
  
      return (
          <div className="App">
              <h1>Country Profile App</h1>
              <hr />
              <SearchBox
                  searchText={searchText}
                  onSearchTextChange={handleSearchTextChange}
              />
              <SearchHits
                  hitCountries={hitCountries}
                  onShowButtonClicked={handleHitsShowButtonClicked}
              />
              <hr />
              {showCountryDetail ? (
                  <CountryDetail country={countryToShow} />
              ) : null}
          </div>
      )
  }
  
  export default App
  