Skip to main content

Edit Form with Passing Props

Premium
3 min read

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

We have to specify the value it seems in the textinput and in the textarea which wasn't the case in Create.jsx

<input onChange={(e) => setData('title', e.target.value)} value={data.title}
// ...
<textarea onChange={(e) => setData('content', e.target.value)} value={data.content}