The final part of this simple CRUD is Create and Edit forms. They will be similar, with a few differences. Let's start with adding a new task.
Link to Create Task Page
First, let's add a link above the table to lead to the Route for creating the task.
In the Laravel Routes, we have Route::resource('tasks', TaskController::class), so we need to link to the /tasks/create URL.
To do that in our Index.tsx, we import the Link component and add this button-style link above the table.
resources/js/pages/Tasks/Index.tsx
import { Head, router } from '@inertiajs/react'; import { Head, Link, router } from '@inertiajs/react'; // ... <Head title="Tasks List" /> <div className={'mt-8'}> <Link className={buttonVariants({ variant: 'outline' })} href="/tasks/create"> Create Task </Link> <Table className={'mt-4'}>This is the visual result:
Now, let's build the page for the Create form.
Create Task: Empty "Skeleton" Page
In the Controller, we have this:
app/Http/Controllers/TaskController.php:
public function create(){ return Inertia::render('Tasks/Create');}So, we need to create the appropriate React component. For now, let's...