Create a New Task

Now connect the controlled form to the task state in App.

1. Submit from the modal

The form should handle submission rather than relying on a button click alone:

<form onSubmit={handleSubmit}>

Inside handleSubmit, prevent the browser’s default page submission:

event.preventDefault();

2. Send the form data upward

Keep TaskModal responsible for collecting input, but let App decide what happens to the new task. Pass an onAddTask callback into the modal.

The modal can then call it with the completed form object:

onAddTask(form);

3. Build the new task in App

App already owns tasks, so it should create the new task and update the array there. The new object needs the same shape as the existing tasks:

{
  id: crypto.randomUUID(),
  title: form.title,
  description: form.description,
  priority: form.priority,
  date: form.date,
  status: form.status
}

Then append it with a new array:

setTasks((current) => [...current, newTask]);

4. Close the modal after success

After adding the task, close the modal. Resetting the form when it closes will also make the next task start with clean fields.

Why not mutate the array?

Do not use something like tasks.push(newTask). React state should be replaced with a new array so React can observe the update.

Checkpoint

Create a task with a different priority and status. It should appear in the correct column immediately, without refreshing the page.