tr effect problem after deletion with useForm in Inertia/React

Question

I have a little problem with inertia/react. the problem is that when I delete a record from my table I would like the tr to have a fadeout effect (or any effect) the problem is that if I try to put an effect in the success, the effect is taken from tr below. I'm using the formDelete method of useForm().

Here is the code:

const UsersContent = ({ users, flash }) => {
    const { delete: formDelete } = useForm();
    const [message, setMessage] = useState(flash.message);
    console.log(message);

    useEffect(() => {
        const timer = setTimeout(() => {
            setMessage(null);
        }, 3000);

        return () => clearTimeout(timer);
    }, [message]);

    const handleSubmit = (e) => {
        e.preventDefault();
        const userId = e.target.id;
        const tr = e.target.closest('tr');
        formDelete(route('users.destroy', userId), {
            onSuccess: () => {
                tr.classList.add('fadeout');
                setTimeout(() => {
                    tr.remove();
                }, 2000);
                setMessage({ tipo: 'success', testo: `Utente ${userId} cancellato correttamente` });
            },
            onError: () => {
                setMessage({ tipo: 'danger', testo: `Errore durante la cancellazione dell'utente ${userId}` });
            }
        });
    }

    return (//code )

Thank u all.

I was expecting an effect on the tr that I would remove with the formDelete, but instead the effect is received by the tr below

Answer 1

Try to use this in your handleSubmit:

import { router } from '@inertiajs/react';

router.reload({ only: ['user'] });

You can see more details in the Inertia.js documentation.

P.S.: It would be clearer if you could also paste your controller code.