Render the Card Details from Props

TaskCard is already close to its final role: receive one task and display it. This lesson is about understanding that boundary before we add actions to the card.

The card receives one object

The component starts with:

export default function TaskCard({ task }) {

That means the card does not need separate props such as title, description, priority, and date. The task object already groups those values together.

Read the task fields

The existing JSX uses values such as:

<h3>{task.title}</h3>
<p>{task.description || "No description"}</p>

The priority badge and formatted date use the same object.

Keep display logic local

The small formatDate helper belongs naturally with the card because formatting the date is a presentation concern. The task’s actual date remains a simple string in the data.

This separation will make later state updates easier: actions can change the task object, while the card decides how the current values look.

Checkpoint

Change the title or description of one task in the initial data. The card should update after the page refreshes, without editing TaskCard.jsx.