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..