Inertia & React CRUD without reloading page

Question

How can i do delete operation Inertia & React without page reloading.

ArticleController:

public function destroy(Article $article) {
        $article->delete();
        return redirect('/admin');
}

jsx:

function ArticleItem({ article }) {
    const { url } = usePage()
    const inAdminPage = url.includes('/admin') ? true : false

    function onDeleteSubmitEventHandler(e) {
        e.preventDefault()
        Inertia.delete(`/article/${article.id}`)
    }

    return (
        <>....
           {inAdminPage &&
                            <>
                                <div onClick={handleOptionsClick} className="hover:bg-gray-100 hover:cursor-pointer transition rounded-full p-2 relative">
                                    <img src="/icon/options.svg" className="w-1" />
                                </div>
                                {options &&
                                    <div id="options" className="absolute right-7 bottom-0  shadow-md">
                                        <ul>
                                            <form onSubmit={onDeleteSubmitEventHandler}>
                                                <button type="submit" className="hover:bg-gray-200 hover:cursor-pointer bg-white px-4 py-3" >Delete</button>
                                            </form>
                                            <li className="hover:bg-gray-200 bg-white px-4 py-3">Edit</li>
                                        </ul>
                                    </div>
                                }
                            </>
                        }
        </>

    )
}

The code above currently requires a page reload to reflect the deletion of data. I want the deletion to occur in real-time without the need for a page reload.

How can i do it?

Thank You

Answer 1

Here's the corrected version of your text:

Try using this in your handleSubmit:

import { Inertia } from '@inertiajs/inertia';

function onDeleteSubmitEventHandler(e) {
    e.preventDefault();
    Inertia.delete(`/article/${article.id}`);
    Inertia.reload({ only: ['article'] });
}

Refer to the Inertia.js documentation for more information on partial reloads.

As you can see in the Inertia.js documentation, this should work.

P.S.: To provide a clearer picture, please paste your controller code as well. Also, try this:

return Inertia.redirect(route('yourROUTE'));

Answer 2

try this code first update your destroy function

public function destroy(Article $article) {
    $article->delete();
    return response()->json(['success' => true]);
}

then modified your code

import { usePage, useRemember } from '@inertiajs/inertia-react';

function ArticleItem({ article }) {
 const { data, setData } = useRemember({ deletedArticleId: null });
   async function onDeleteSubmitEventHandler(e) {
          const response = await Inertia.delete(`/article/${article.id}`);
            if (response && response.success) {
                setData('deletedArticleId', article.id);
             }
          }
   }

• The destroy method in the ArticleController returns a JSON response indicating the success of the deletion operation.
• Use useRemember from Inertia to store the ID of the deleted article.
• With the updated state, you can conditionally render the deleted article from the UI, ensuring real-time deletion without page reloads