Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

JakeStockwell's avatar

Inertia / React & Delete Record

Hello! I'm working on a simple CRUD setup with L11 + Inertia + React & can't get the delete method to work. If I use "router.delete("/route/" + id);" in the JSX the request gets through a resource route to the destroy method in the controller, but the expected model is empty & the ID attribute can't be found. Does anyone have this setup working?

0 likes
15 replies
tykus's avatar

What value does id have in the JSX template; and what does the Request URL look like?

JakeStockwell's avatar

Hey Tykus. ID is an integer, taken from a loaded object. I followed the Beginning React tutorial by Andre Madarang so it's a todoId. The request looks like this :

router.delete("/todos/" + id);

tykus's avatar

@JakeStockwell I asked what the URL looks like in the Request - look in your Network tools in the Browser's devtools

tykus's avatar

@JakeStockwell finally!

Ok, so there is a DELETE Request being made to /todos/1 and you say that the the expected model is empty; so you are Route-Model binding?

Does the destroy action's parameter have the correct parameter name; i.e. $todo? It must match the wildcard parameter name in the registered route:

public function destroy(Todo $todo)
{
    // ...
}
JakeStockwell's avatar

In web.php I have a resource.

Route::resource('/todos', TodoController::class) ->only(['index', 'store', 'update', 'destroy']) ->middleware(['auth', 'verified']);

JakeStockwell's avatar

I had a bunch of 405 errors using a number of other request methods, but this one worked & got through to the 'destroy' method on the controller.

tykus's avatar

@JakeStockwell still not answering the question...

Aside, the other Request verbs didn't work because you only registered endpoints for update (PUT/PATCH) and destroy (DELETE)

JakeStockwell's avatar

Other verbs are working, including Post, but I'm using Inertia's router.visit to make the request in that instance.

JakeStockwell's avatar

I understand that there's an issue around spoofing, and it's that that's giving me a problem?

tykus's avatar
tykus
Best Answer
Level 104

@JakeStockwell no, I suspect the issue is Route-Model binding (as mentioned above).

Since the $user variable is type-hinted as the App\Models\User Eloquent model and the variable name matches the {user} URI segment, Laravel will automatically inject the model instance that has an ID matching the corresponding value from the request URI.

https://laravel.com/docs/11.x/routing#implicit-binding

LaryAI's avatar
Level 58

To address the issue you're facing with deleting a record using Inertia.js and React in a Laravel application, let's go through the steps to ensure everything is set up correctly.

Step 1: Ensure Route is Correct

First, make sure your route is defined correctly in your web.php file. It should look something like this:

Route::delete('/route/{id}', [YourController::class, 'destroy'])->name('route.destroy');

Step 2: Controller Method

In your controller, ensure the destroy method is correctly set up to receive the ID and delete the record:

public function destroy($id)
{
    $model = YourModel::findOrFail($id);
    $model->delete();

    return redirect()->route('route.index')->with('success', 'Record deleted successfully.');
}

Step 3: React Component

In your React component, you should use the Inertia object to make the delete request. Ensure you import Inertia from @inertiajs/inertia and use it like this:

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

const YourComponent = ({ id }) => {
  const handleDelete = () => {
    if (confirm('Are you sure you want to delete this record?')) {
      Inertia.delete(`/route/${id}`, {
        onSuccess: () => {
          console.log('Record deleted successfully');
        },
        onError: (errors) => {
          console.error(errors);
        },
      });
    }
  };

  return (
    <button onClick={handleDelete}>
      Delete
    </button>
  );
};

export default YourComponent;

Step 4: Check CSRF Token

Ensure that your application is correctly handling CSRF tokens. Laravel automatically includes a CSRF token in the meta tags of your HTML, and Inertia should handle this for you. However, if you encounter issues, double-check that your setup is correct.

Step 5: Debugging

If the model is still empty, consider adding some debugging statements in your controller to log the incoming request and ID:

public function destroy($id)
{
    \Log::info('Deleting record with ID: ' . $id);

    $model = YourModel::findOrFail($id);
    $model->delete();

    return redirect()->route('route.index')->with('success', 'Record deleted successfully.');
}

This will help you verify that the ID is being passed correctly to the controller.

By following these steps, you should be able to successfully delete a record using Inertia.js and React in your Laravel application. If you continue to experience issues, double-check each part of the setup for any discrepancies.

Please or to participate in this conversation.