My input only accepts one character at a time. And is repeating the same text for other Input

Question

I can only type in the input by placing one character at a time. and the same value I put in one, repeats for the other inputs.

I have tried several alternatives to change handleChange and etc but nothing helps.

I need a light, please!

class Move2 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      amount: "",
      code: "",
      option: "Entrada"
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit = e => {
    e.preventDefault();
    this.props.updateProduct(this.state);
  };
  handleChange = e => {
    this.setState({
      [e.target.name]:
        e.target.name === "amount" ? parseInt(e.target.value) : e.target.value
    });
  };

  render() {
    const { products, auth } = this.props;
    const columns = [

      {apenas headers normais aqui}...

      {
        Header: "Código",
        accessor: "code",
        style: {
          textAlign: "center"
        },
        Cell: props => {
          return (
            <input
              name="code"
              type="text"
              value={this.state.code}
              onChange={this.handleChange.bind(this)}
              style={{
                width: "100px",
                height: "20px",
                border: "none"
              }}
            ></input>
          );
        },
        sortable: false,
        filterable: false,
        responsive: true,
        width: 150
      },
      {
        Header: "Movimentação",
        style: {
          textAlign: "center"
        },
        Cell: props => {
          return (
            <input
              name="amount"
              type="text"
              defaultValue={this.state.amount}
              onChange={this.handleChange}
              style={{
                width: "100px",
                height: "20px",
                border: "none"
              }}
            ></input>
          );
        },
        sortable: false,
        filterable: false,
        responsive: true,
        width: 150
      },
      {
        Header: "Movimentação",
        style: {
          textAlign: "center"
        },
        Cell: props => {
          return (
            <input
              name="date"
              type="date"
              defaultValue={this.state.date}
              onChange={this.handleChange}
              style={{
                width: "130px",
                height: "20px",
                border: "none"
              }}
            ></input>
          );
        },
        sortable: false,
        filterable: false,
        responsive: true,
        width: 150
      },
      {
        Header: "Opção",
        style: {
          textAlign: "center"
        },
        Cell: props => {
          return (
            <select
              name="option"
              value={this.state.option}
              onChange={this.handleChange}
            >
              <option value="Entrada">Entrada</option>
              <option value="Saída">Saída</option>
            </select>
          );
        },
        sortable: false,
        filterable: false,
        responsive: true,
        width: 100,
        maxWidth: 100,
        minWidth: 100
      },
      {
        Header: "Confirmar",
        style: {
          textAlign: "center"
        },
        Cell: props => {
          return (
            <input
              onClick={e => {
                this.handleSubmit(e);
                this.handleSubmitMovimentacao(e);
              }}
              value="Confirmar"
              type="submit"
            />
          );
        },
        sortable: false,
        filterable: false,
        responsive: true,
        width: 80,
        maxWidth: 80,
        minWidth: 80
      }
    ];
    return (
      <div className="s-container">
        <ReactTable
          columns={columns}
          data={products}
        />
      </div>
    );
  }
}
const mapStateToProps = state => {
  return {
    products: state.firestore.ordered.products,
    auth: state.firebase.auth
  };
};

const mapDispatchToProps = dispatch => {
  return {
    updateProduct: product => dispatch(updateProduct(product)),
  };
};
export default compose(
  connect(mapStateToProps, mapDispatchToProps),
  firestoreConnect([{ collection: "products" }])
)(Move2);
``


  segue print: https://i.stack.imgur.com/ZkOdL.png

Answer 1

Instead of using the prop defaultValue, uses prop value in input.

Cell: props => {
      return (
        <input
          name="date"
          type="date"
          value={this.state.date}
          onChange={this.handleChange}
          style={{
            width: "130px",
            height: "20px",
            border: "none"
          }}
        ></input>
      );
    }