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