06 - Create Form with Inertia and TypeScript

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

The Full Lesson is Only for Premium Members

Want to access all of our courses? (30 h 41 min)

You also get:

55 courses

Premium tutorials

Access to repositories

Private Discord

Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

Steve Purcell 8 months ago ✓ Link copied!

Great course ... I have stayed away from React but I am jumping in with full force.

How would we add the toaster to be shown on the create and edit forms? I would think it should go in the controller but I am not sure how to import Sonner.

Thanks

Modestas 8 months ago ✓ Link copied!

To do that, you might want to look into https://inertiajs.com/shared-data#flash-messages

From there, you need to retrieve that flash message on your page and trigger a toast notification. In my case, I had to do something like this:

const { flash } = usePage().props;
 
if (flash.message) {
    setTimeout(() => {
        toast.success(flash.message);
    }, 200);
}

anjanesh 4 months ago ✓ Link copied!

import { Head, router } from '@inertiajs/react';
import { Head, Link, router } from '@inertiajs/react';

I think you meant the highlight the second line in green.

What is

forceFormData: true,
preserveScroll: true,

Modestas 4 months ago ✓ Link copied!

Hmm, interesting, we seem to have an issue with highlighter again. Will check and fix it! Thank you for reporting this!

As for your questions:

forceFormData - Allows for files to be uploaded and uses formData instead of json type for form submits. Without this - files will not be uploaded (it's like html multipart/form-data on <form> tag)
preserveScroll - Won't scroll you to the top of the page as soon as you press form submit. This just saves time and prevents form from jumping around

Felix Wei 3 months ago ✓ Link copied!

It's weird, I got error Cannot find name 'route'.ts(2304). Error in this code route('tasks.store')

Sandeep 2 months ago ✓ Link copied!

I got the same error. So, I searched on ChatGPT and used the following artisan command to generate the routes in front-end.

php artisan wayfinder:generate

Then, in the Create.tsx file, you can import the route in the following way.

import { store } from '@/routes/tasks';
 
const createTask: FormEventHandler = (e) => {
        e.preventDefault();
 
        post(store.url(), {
            forceFormData: true,
            preserveScroll: true,
            onSuccess: () => {
                reset();
            },
            onError: (errors) => {
                if (errors.name) {
                    reset('name');
                    taskName.current?.focus();
                }
            },
        });
    };

Create Form with Inertia and TypeScript

Link to Create Task Page

Create Task: Empty "Skeleton" Page

The Full Lesson is Only for Premium Members

Comments & Discussion

We'd Love Your Feedback

Thank You!