Edit Form and Breadcrumbs

Now, let's build the page to edit the task. It will be structurally similar to the Create form but with a few differences.

Also, at the end of this lesson, we will add breadcrumbs above the table.

Table: Link to Edit Route

We need to add the "Edit" button to the table.

{tasks.map((task) => (
    <TableRow key={task.id}>
 
        // ...
 
        <TableCell className="flex flex-row gap-x-2 text-right">
 
            <Link className={buttonVariants({ variant: 'default' })}
                  href={`/tasks/${task.id}/edit`}>
                Edit
            </Link>
 
            <Button variant={'destructive'} className={'cursor-pointer'}
                    onClick={() => deleteTask(task.id)}>
                Delete
            </Button>
        </TableCell>
    </TableRow>
))}

Here's the visual result:

Edit Page: React Component

The previous code snippet above shows the URL /tasks/${task.id}/edit. This corresponds to the Controller method edit(), which uses Route Model Binding to find the task.

app/Http/Controllers/TaskController.php

public function edit(Task $task)
{
    return Inertia::render('Tasks/Edit', [
        'task' => $task,
    ]);
}

Now, we need to create the..