Tutorial antetior Editar y Actualizar datos desde API

React.js (Frontend)

Crear un modal en el listData() para confirmar de eliminar datos

<tr>
            <td>{data.titulo}</td>
            <td>{data.descripcion}</td>
            <td>{data.precio}</td>
            <td>
              <button class="btn btn-info" onClick={()=>this.showModalEdit(data)}>Editar</button>
              <br/>
              <button class="btn btn-danger" onClick={()=>this.showModalDelete(data)}>Eliminar</button>
            </td>
          </tr>

Crear una función para guardar idProducto seleccionado y mostrar modal

  showModalDelete(data){ 
      // id seleccionado para eliminar
      this.setState({ idProducto:data.id })
      $("#exampleModalDelete").modal("show");
    }

Crear un botón de eliminar para mostrar modal de confirmar

<div class="modal fade" id="exampleModalDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
              <div class="modal-dialog" role="document">

                <div class="modal-content">

                  <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Eliminar</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <p>Esta seguro desea de eliminar un regsitro?</p>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onClick={()=>this.sendNetworkDelete()}>Eliminar</button>
                  </div>
                </div>

              </div>
            </div>

Crear una función sendNetworkDelete para enviar id y eliminar producto desde API

sendNetworkDelete(){

      const formData = new FormData()
      formData.append('id',this.state.idProducto)

      axios.post(baseUrl+'api/producto/delete',formData).then(response=>{

           if (response.data.success==true) {
             alert(response.data.message)
             // para cargar datos de nuevo
             this.loadDataProduct()
             // para cerrar el modal
             $("#exampleModalDelete").modal("hide");
           }

       }).catch(error=>{
         alert("Error "+error)
       })

    }

Laravel (Backend)

Crear una ruta para API de eliminar

// Eliminar producto
Route::post('producto/delete','API\ControllerProduct@delete');

Crear una función de eliminar en el Controlador

    public function delete(Request $request){
      // Eliminar
      Producto::where('id',$request->input('id'))->delete();
      // respesta de JSON
      $response['message'] = "Elimino exitosamente";
      $response['success'] = true;

      return $response;
    }

Listo … espero que funcione perfecto. Hasta pronto.

Codigo fuente

https://github.com/artyom-developer/laravel-react