Courses

React.js + Inertia in Laravel 11: From Scratch

Edit Form with Passing Props

Summary of this lesson:
- Create edit page for posts
- Pass existing post data as props
- Use Inertia form helper for updates
- Implement edit form similar to create form
- Maintain SPA navigation experience

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

The full lesson is only for Premium Members.
Want to access all 18 lessons of this course? (57 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord