Control the Task Form

A form becomes useful when React knows what its fields contain. We will turn the title, description, priority, status, and date fields into controlled inputs.

1. Give the modal form state

In TaskModal.jsx, import useState:

import { useState } from "react";

Inside the component, create one state value for the form:

const [form, setForm] = useState({
  title: "",
  description: "",
  priority: "medium",
  status: "todo",
  date: ""
});

The form object mirrors the task fields that the user can enter.

2. Bind one field at a time

Start with the title input:

<input
  name="title"
  value={form.title}
  onChange={handleChange}
/>

Then use the same pattern for the other inputs and selects.

3. Update the matching property

Create a small change handler:

function handleChange(event) {
  const { name, value } = event.target;

  setForm((current) => ({
    ...current,
    [name]: value
  }));
}

The computed property [name] lets one handler update different fields.

Why use the previous state?

The spread keeps the other fields intact. If you changed only title without spreading the existing object, you could accidentally remove the other form values.

Checkpoint

Type into every field. The values should remain controlled by React state. You have not created a task yet; you have only captured what the user entered.