Как бы я показывал данные только при поиске на входе?

Question

Я учусь реагировать и создаю простое приложение, которое позволяет пользователям искать страны из API. Я успешно извлек API, установил его в какое-то состояние и создал компонент фильтра для поиска в текстовом вводе. Однако я хотел бы ничего не показывать, пока пользователь не введет в поисковой строке данные, которые затем отобразят страны, соответствующие набранным буквам. Каков наиболее используемый способ сделать это?

const App = () => {
  const [countries, setCountry] = useState([]) 
  const [search, setSearch] = useState('')


  useEffect(() => {
    console.log('effect')
    axios
    .get(`https://restcountries.eu/rest/v2/all`)
    .then(response => {
      console.log(response,'promise fulfiled')
      setCountry(response.data)
    })
  }, [])

  const handleSearch = (e) => {
    setSearch(e.target.value)
  }

  const filter = countries.filter(country =>
    country.name.toLowerCase().includes(search.toLowerCase()) 
    );


  return (
    <div className="App">
    Search Country: 
    <input type='text' onChange={handleSearch}/>
    <Country filter={filter} />
    </div>
  );
}

const Country = ({filter}) => {
    return(
        <ul style={{listStyle: 'none'}}>
        {
        filter.map(country =>
          <li key={country.name}>
            {country.name}
          </li>)
        }
      </ul>
    )

Это текущий код, однако он показывает все страны из API. Я бы не хотел показывать страны, пока пользователь не введет данные в поле ввода. Спасибо.

Answer 1

Просто создайте условный рендер для <Country />.

Отображать список стран только при условии search.

{ search && <Country filter={filter} /> }

Демо