function App () {

  const [animals] = React.useState([

    'dog', 'cat', 'mouse', 'elephant', 'wolf', 'peacock', 'fish', 'dragon', 'ant', 'dinosaur'

  ])

  const [filter, setFilter] = React.useState('')

  const filteredAnimals = React.useMemo(() => {

    const result = []

    animals.forEach(animal => {

      if (animal.includes(filter)) {

        result.push(animal)

      }

    })

    return result

  }, [animals, filter])

  return (

    <div>

      <FilterForm value={filter} onChange={setFilter} />

      <br />

      Filtered animals: {filteredAnimals.join(', ')}

    </div>

  )

}

​

function FilterForm ({ value, onChange }) {

  const handleChange = (event) => {

    onChange(event.target.value)

  }

  return (

    <form>

      <input

        type="text"

        value={value}

        onChange={handleChange}

        placeholder="Filtered value"

      />