Another common feature is deleting a record with a confirmation message.
First, let's take care of the back-end part.
app/Http/Controllers/PostController.php:
class PostController extends Controller{ // ... public function destroy(Post $post): RedirectResponse { $post->delete(); return redirect()->route('posts.index') ->with('message', 'Post deleted successfully'); }}For the front-end, first, let's add the button.
resources/js/Pages/Posts/Index.jsx:
import AppLayout from '../../Layouts/AppLayout.jsx';import { Head, Link } from '@inertiajs/react'; export default function PostsIndex({ posts }) { return ( <AppLayout> <Head> <title>Posts</title> </Head> <div> <Link href={route('posts.create')} className="mb-4 inline-block rounded-md bg-blue-500 px-4 py-3 text-xs font-semibold uppercase tracking-widest text-white shadow-sm"> Add new post </Link> <table className="min-w-full divide-y divide-gray-200 border"> <thead> <tr> <th className="px-6 py-3 bg-gray-50 text-left"> <span className="text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">ID</span> </th> <th className="px-6 py-3 bg-gray-50 text-left"> <span className="text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Title</span> </th> <th className="px-6 py-3 bg-gray-50 text-left"> <span className="text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Content</span> </th> <th className="px-6 py-3 bg-gray-50 text-left"> <span className="text-xs leading-4 font-medium text-gray-500 uppercase tracking-wider">Created At</span> </th> <th className="px-6 py-3 bg-gray-50 text-left"> </th> </tr> </thead> <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"> {post.id} </td> <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900"> {post.title} </td> <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900"> {post.content} </td> <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900"> {post.created_at} </td> <td className="px-6 py-4 whitespace-no-wrap text-sm leading-5 text-gray-900"> <button 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> </table> </div> </AppLayout> );};
The delete button will have a click event. When the button is clicked, we can...