Skip to main content

Create Post Form: Component and Submit in SPA

Premium
5 min read

In the last lesson, we stopped before creating the login form. But, to create the login form, we need to get familiar with forms and how they work in Inertia in general.

We will do that based on another form: we will create the "Add new post" form and apply that form to the login form in the following lessons a bit later.

Preparation: React Component, Route and Controller

First, we need to create a React component where the form will be, then the route, and then we need to submit the form.

**resources/js/Pages/Posts/Create.jsx:

import AppLayout from '../../Layouts/AppLayout.jsx';
import { Head, Link, useForm } from '@inertiajs/react';
 
export default function CreatePost() {
    return (
        <AppLayout>
 
        <Head title="New Post" />
            <div>
                Form here
            </div>
        </AppLayout>
    );
}

In the routes, we will transform the post route into a resource.

routes/web.php:

Route::get('posts', [PostController::class, 'index'])->name('posts.index'); 
Route::resource('posts', PostController::class); 
Route::inertia('about', 'About')->name('about');
Route::inertia('login', 'Pages/Login')->name('login');

In the PostController we need to return Inertia in the create() method.

app/Http/Controllers/PostController.php:

use Inertia\Inertia;
use Inertia\Response;
 
class PostController extends Controller
{
    //
 
    public function create(): Response 
    {
        return Inertia::render('Posts/Create');
    } 
}

After visiting the posts/create page, we see the page with the Form here text.

Add Link to the Form

Next, add a link..

The Full Lesson is Only for Premium Members

Want to access all of our courses? (31 h 16 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

A
anjanesh ✓ Link copied!

#1 This should come before "Now we can see the create form."

    const submit = (e) => { 
        e.preventDefault();
 
        post(route('posts.store'));
    };

Otherwise console shows submit is not defined.

#2 This I understand would be resolved by anyone who already know Laravel well enough - but just in case : protected $fillable = ['title', 'content']; has to be in app\Models\Post.php otherwise we'll get the error : Add [title] to the fillable property to allow mass assignment on [App\Post].

M
marcelo-kazalukian ✓ Link copied!

Hello. Great tutorial. I have a form with fill-gap exercises (sentences and users must complete them). I want to submit a form, then highlight with green the correct ones and highlight the incorrect ones with red. In the example, after storing the post there is a redirection: return redirect()->route('posts.index'); how can I stay in the same form, receive the results, and update the UI? Thanks so much.

N
Nerijus ✓ Link copied!

Return as validation errors maybe. Your question isn't something that can be answered here in the comment especially without more context

M
marcelo-kazalukian ✓ Link copied!

Thanks for your replying. I don't expect an error, I want to a proper response and update the UI. I just want to change the redirection in the store method for something that allow me stay in the same page and update it.

N
Nerijus ✓ Link copied!

redirect()->back() maybe. But if you know the route to which you want to get back why not use it? As I said it's a bit hard to answer in a comment here

N
Nerijus ✓ Link copied!

In your case a manual inertia visit might be even