Tutorial anterior Enviar y Insertar datos desde API.

React.js ( Frontend )

Crear dos variables de state

idProducto:0,
edit:false

idProducto es para guardar el id de producto seleccionado y edit sirve para mostrar el botón de actualizar en caso de selección «Editar»

Modal para Editar y Crear.

Creamos un modal de editar y crear para poder ahorrar el espacio de código fuente

<form>
            <div class="modal fade" id="exampleModal" 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">Formulario de producto</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">×</span>
                    </button>
                  </div>
                  <div class="modal-body">
                    <div class="form-group">
                     <label for="exampleInputEmail1">Nombre de producto </label>
                     <input type="text" class="form-control" value={this.state.formNombre} onChange={this.handleChangeNombre} />
                    </div>
                    <div class="form-group">
                     <label for="exampleInputEmail1">Descripcion de producto</label>
                     <textarea class="form-control" rows="3" value={this.state.formDescripcion} onChange={this.handleChangeDescp}></textarea>
                    </div>
                    <div class="form-group">
                     <label for="exampleInputEmail1">Precio</label>
                     <input type="number" class="form-control" value={this.state.formPrecio} onChange={this.handleChangePreci} />
                    </div>
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>

                    {
                      this.state.edit?
                      <button type="button" class="btn btn-primary" onClick={()=>this.sendNetworkUpdate()}>Actualizar</button>
                      :
                      <button type="button" class="btn btn-primary" onClick={()=>this.sendNetworkProduct()}>Guardar</button>
                    }
                  </div>
                </div>
              </div>
            </div>
            </form>

Botón de Editar

Agregar nueva celda para Acciones de botones y poner un botón de «Editar» en la función de listData()

<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>
            </td>
          </tr>

Función del boton «Editar» para mostrar el modal y llenar los datos de producto seleccionado

    showModalEdit(data){
      //alert("mostrar modal "+JSON.stringify(data))
      this.setState({
        idProducto:data.id,
        formNombre:data.titulo,
        formDescripcion:data.descripcion,
        formPrecio: data.precio,
        edit:true
      })
      $("#exampleModal").modal("show");
    }

Función del boton «Actualizar» y enviar los datos e actualizar desde API

sendNetworkUpdate(){

      const formData = new FormData()
      formData.append('id',this.state.idProducto)
      formData.append('nombre',this.state.formNombre)
      formData.append('descripcion',this.state.formDescripcion)
      formData.append('precio',this.state.formPrecio)

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

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

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

 }

Laravel ( Backend )

Agregar una nueva ruta en el API

// Actualizar producto
Route::post('producto/update','API\ControllerProduct@update');

Agregar una nueva función para actualizar en el controlador app/Http/Controllers/API/ControllerProduct.php

    public function update(Request $request){

      // inserta los datos
      Producto::where('id',$request->input('id'))->
      update([
        'titulo' => $request->input('nombre'),
        'descripcion' => $request->input('descripcion'),
        'precio' => $request->input('precio')
      ]);

      // respesta de JSON
      $response['message'] = "Actualizo exitosamente";
      $response['success'] = true;

      return $response;

    }

Agregar $timestamps para evitar error de updated_created en el modelo de app/Producto.php

public $timestamps = false;

Siguiente tutorial Eliminar datos desde API