What should be proper event type of handleChange and handleSubmit

Issue

Here is my codesandbox links, https://codesandbox.io/s/vigorous-banach-gf35mn?file=/src/App.tsx:643-655

I am not getting the proper event types, Here is my try:

const handleChange = (
    event: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = event.target as
      | HTMLInputElement
      | HTMLTextAreaElement;
    setNewTask((prev) => ({ ...prev, id: Date.now(), [name]: value }));
  };

  const handleSubmit = (event: React.FormEventHandler<HTMLFormElement>) => {
    event.preventDefault();
    if (!newTask.title) return;
    setAllTasks((prev) => [newTask, ...prev]);
    setNewTask({ id: 0, title: "", description: "" });
  };

Solution

You just need to change the event type from ChangeEventHandler to ChangeEvent Because ChangeEventHandler is for the entire Handler function. But for the event object the type was ChangeEvent.

That's what the error msg was saying!

Modified Code Sandbox

Answered By - Bishwajit jha