Drill 24: Trade-off — Forms, lists and accessibility

function SearchForm({ onSearch }) {
  const [query, setQuery] = useState('')

  function submit(event) {
    event.preventDefault()
    onSearch(query.trim())
  }

  return (
    <form onSubmit={submit}>
      <label htmlFor="query">Search lessons</label>
      <input
        id="query"
        value={query}
        onChange={(event) => setQuery(event.target.value)}
      />
      <button type="submit">Search</button>
    </form>
  )
}