button does not work

gistfile1.txt

import React, { useState, useEffect } from 'react'

const countriesList = [
  { name: 'Afghanistan' },
  { name: 'Åland Islands' },
  { name: 'Albania' },
  { name: 'Algeria' },
  { name: 'American Samoa' },
  { name: 'Andorra' },
  { name: 'Angola' },
]
const Header = ({ input, handleChange, handleSubmit }) => {
  return (
    <form onSubmit={handleSubmit}>
      Input:{' '}
      <input
        style={{ border: '1px solid blue' }}
        type="text"
        value={input}
        onChange={handleChange}
      />
    </form>
  )
}

function App() {
  const [countries, setCountries] = useState(countriesList)
  const [searchTerm, setSearchTerm] = useState('')
  const [input, setInput] = useState('')

  // console.log('countries global', countries)

  // HOW DO YOU 'setCountries' TO THE FILTERED LIST???
  const filteredCountries = countriesList.filter(country => {
    return country.name.toLowerCase().startsWith(input.toLowerCase())
      ? country
      : null
  })
  //console.log('filtered countries', filteredCountries) // returns filtered countries
  //setCountries(filteredCountries) // too many rerenders

  // WITH USEEFFECT?
  useEffect(() => {
    console.log('useEffect countries', countries) // returns filtered countries
    if (countries.length === 1) {
      console.log('one country')
    }
    // app is completely crippled & frozen with 'filteredCountries as a dependency,
    // but with no dependency, 'setCountries' does not do anything
  }, [countries])

  // HANDLECHANGE IS SET ON EACH KEYSTROKE
  const handleChange = event => {
    event.preventDefault()
    setInput(event.target.value)
  }

  // HANDLESUBMIT IS SEPARATE SO INPUT CAN BE SET TO ''
  // also I plan to add a button to call this instead of 'enter'

  // Put searchTerm back in, it is necessary for the short list
  // of countries with 'details' button
  const handleSubmit = e => {
    e.preventDefault()
    setSearchTerm(input)
    input === '' ? setCountries(countriesList) : setCountries(filteredCountries)
    setInput('')
  }

  const countryDetail = country => {
    console.log('countryDetail', country)
    return (
      <div>
        <strong>Country Detail</strong>
        <br />
        Name: {country.name} Capital: {country.capital}
      </div>
    )
  }

  console.log('searchTerm', searchTerm)
  const content = () => {
    if (countries.length === 0) {
      return <div>No matches, try again</div>
    } else if (countries.length === 1) {
      return countryDetail(countries[0])
    } else if (countries.length > 5 && searchTerm) {
      return <div>More than 5 results, please adjust criteria</div>
    } else if (countries.length > 5 && !searchTerm) {
      return (
        <div>
          {countries.map(country => (
            <div>
              {country.name}
              <div></div>
            </div>
          ))}
        </div>
      )
    } else {
      return countries.map(country => {
        const handleShow = () => {
          countryDetail(country)
        }

        return (
          <div key={country.alpha2Code}>
            {country.name}
            <button onClick={handleShow}>details</button>
          </div>
        )
      })
    }
  }

  return (
    <div>
      <Header
        input={input}
        //  searchTerm={searchTerm}
        handleChange={handleChange}
        handleSubmit={handleSubmit}
      />
      <div> {content()} </div>
    </div>
  )
}

export default App