Event Handlers

Event handlers are functions that run when the user does something: clicks, types, submits a form. Pass the function itself (onClick={handleClick}), not the result of calling it.

function Form() {
  const [text, setText] = useState("")

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()  // stop page reload
    alert(text)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={text} onChange={(e) => setText(e.target.value)} />
      <button type="submit">Send</button>
      <button type="button" onClick={() => setText("")}>Clear</button>
    </form>
  )
}