Typing events

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

1. Explain what the generic parameter of a React event type names
2. Write a typed onChange handler for an input and a select
3. Spot the HTMLElement generic that has no value property

In practice

A few lines that show Typing events doing its job.

function Search({ onSearch }: { onSearch: (q: string) => void }) {
  const [query, setQuery] = useState("");

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(event.target.value);
  };
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    onSearch(query.trim());
  };
  return <form onSubmit={handleSubmit}><input value={query} onChange={handleChange} /></form>;
}

The common mistake

What to know first

Your roadmap puts these before Typing events, unless you already know them.

• Typing props
• Event handlers

How it stays learned

Once a session shows you understand Typing events, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

1. Day 3First recall, while it is fresh
2. Day 7Second, a week on
3. Day 18Last, when it has settled