modificar

import * as React from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import { Button } from 'react-bootstrap';

class Modificar extends React.Component{
    constructor(props) {
        super(props);

        this.state = {
            products: [],
            producto: {},
            codigo: "",
            nombre: "",
            categoria: "",
            precio: "",
            fecha: "",
            cambio: false,
            isLoading: false
        };
            //this.handleInputChange = this.handleInputChange.bind(this);
        }
        //Cuando se edita los campos del input, se guarda el valor ingresado **
       /* handleInputChange(event) {
            const target = event.target;
            const value =  target.value;
            const name = target.name;

            this.setState({
              [name]: value
            });
          }*/

          //Evento cuando se presiona el boton editar **Aun no funciona bien :c
        editProduct(e) {
            this.setState({codigo: this.codigop.value});
            this.setState({nombre: this.nombrep.value});
            this.setState({categoria: this.categoriap.value});
            this.setState({precio: this.preciop.value});
            fetch('http://localhost:8081/api/update?id='+e+'&codigo='+this.state.codigo+'&nombre='+this.state.nombre+'&fecha='+this.state.fecha+'&categoria='+this.state.categoria+'&precio='+this.state.precio)
            .then(response => console.log("Producto actualizado "+ this.state.codigo));
            this.setState({products: [], isLoading: false});
            this.componentDidMount();
            this.render();

            }

    //Carga la lista de productos para que puedan ser modificadas
    componentDidMount() {
        this.setState({isLoading: true});

        fetch('http://localhost:8081/api/all')
            .then(response => response.json())
            .then(data => this.setState({products: data, isLoading: false}));
        }

    render() {
        const {isLoading} = this.state;
        if (isLoading) {
            return <p>Cargando...</p>;
        }
        else{
            return (
              <div>

                  <table id="t01">
                    <tbody>
                      <tr>
                        <th>Codigo</th>
                        <th>Nombre</th>
                        <th>Categoria</th>
                        <th>Pecio</th>
                        <th>Accion</th>
                      </tr>
                              {this.state.products.map((product) =>
                      <tr key={product.id}>
                        <th><input ref={(codigoc) => this.codigop = codigoc}  name="codigo" type="text" defaultValue = {product.codigo} />{this.state.codigo}</th>
                        <th><input ref={(nombrec) => this.nombrep = nombrec} name="nombre" type="text"  defaultValue = {product.nombre} />{this.state.nombre}</th>
                        <th><input ref={(categoriac) => this.categoriap = categoriac} name="categoria" type="text" defaultValue = {product.categoria} />{this.state.categoria}</th>
                        <th><input ref={(precioc) => this.preciop = precioc} name="precio" type="text" defaultValue = {product.precio}/>{this.state.precio}
                        <input ref={(fechac) => this.fechap = fechac} name="fecha" type="hidden" defaultValue = {product.fecha}/>{this.state.fecha}</th>
                        <th> <button onClick={(e) => this.editProduct(product.id)}>editar</button></th>
                      </tr>
                              )}
                    </tbody>
                  </table>
              </div>


            );
        }
      }
}

export default Modificar;