Let's finish our CRUD with the edit functionality.
Let's add a link near the Delete button, which will go to the Edit page.
resources/js/Pages/Posts/Index.jsx:
import AppLayout from '../../Layouts/AppLayout.jsx';import { Head, Link, router } from '@inertiajs/react'; export default function PostsIndex({ posts }) { // ... return ( // ... <tbody className="bg-white divide-y divide-gray-200 divide-solid"> {posts && posts && posts.map((post) => ( <tr key={post.id}> // ... <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900"> <Link href={route('posts.edit', post.id)} className="mr-2 inline-block rounded-md bg-blue-500 px-3 py-2 text-xs font-semibold uppercase tracking-widest text-white shadow-sm"> Edit </Link> <button onClick={() => destroy(post.id)} type="button" className="rounded-md bg-red-600 px-3 py-2 text-xs font-semibold uppercase tracking-widest text-white shadow-sm"> Delete </button> </td> </tr> ))} </tbody> // ... );};
We don't need to add a Laravel route because we have a resource route for the posts. We only need the methods in the Controller.
app/Http/Controllers/PostController.php:
class PostController extends Controller{ // ... public function edit(Post $post): Response { return Inertia::render('Posts/Edit', compact('post')); } public function update(Post $post, StorePostRequest $request): RedirectResponse { $post->update($request->validated()); return redirect()->route('posts.index') ->with('message', 'Post updated successfully'); } // ...}The React component for the Edit page will be similar to the Create component.
Instead of post, the form action method will be patch with a route to posts.update, and we will pass the post ID. The post itself is passed to the React component as a prop. The form values will be defined from the post object.
Copy the Create form and adjust only the highlighted code.
resources/js/Pages/Posts/Edit.jsx:
import AppLayout from '../../Layouts/AppLayout.jsx';import { Head, Link, useForm } from '@inertiajs/react'; export default function EditPost({ post }) { const { data, setData, patch, processing, errors } = useForm({ title: post.title, content: post.content, }); const submit = (e) => { e.preventDefault(); patch(route('posts.update', {id:post.id})); }; return ( <AppLayout> <Head title="Update Post" /> // ... </AppLayout> );}We should have the data in the edit form.
After editing the post and saving, we are again redirected to the post table with an SPA feeling and can see the message and edited post.
The edit form is almost identical to the create form with a difference in how you pass the parameters and how you submit the form with form.put instead of form.post.
We have to specify the value it seems in the textinput and in the textarea which wasn't the case in Create.jsx