Code Quiz

Typing a React onChange Handler

Spot the incorrect DOM event type used for a controlled input's change handler.

Codetypescript

import { useState } from 'react';

interface SearchProps {
  onSearch: (term: string) => void;
}

function Search({ onSearch }: SearchProps) {
  const [term, setTerm] = useState('');

  const handleChange = (e: React.MouseEvent<HTMLInputElement>) => {
    setTerm(e.target.value);
    onSearch(e.target.value);
  };

  return <input value={term} onChange={handleChange} />;
}

What is the bug in this code?

Next →Typing useState & Event Handlers