Skip to main content

Black Friday 2025! Only until December 1st: coupon FRIDAY25 for 40% off Yearly/Lifetime membership!

Read more here

Create Form with Inertia and TypeScript

Premium
5 min read

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? (29 h 14 min)

You also get:

54 courses
Premium tutorials
Access to repositories
Private Discord
Get Premium for $129/year or $29/month

Already a member? Login here

Comments & Discussion

SP
Steve Purcell ✓ 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

M
Modestas ✓ 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);
    }
A
anjanesh ✓ 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,

?

M
Modestas ✓ 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
FW
Felix Wei ✓ Link copied!

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

S
Sandeep ✓ 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();
                }
            },
        });
    };