React - Can't change number in input

Question

I'm maping a table using data from API using axios get. In table i have input field with value from axios data but when i type in this input value doesn't change. For example if in input is number 8 from data and I salect input and type number 5 in input is still number 8.

How can I unlocked input field?

axios code

axios
  .get("http://10.10.10.27/api?", {params : {rok : this.state.rok, idUchwaly : this.state.id}, headers: { 'Authorization' : 'Bearer '+ this.state.token }})
  .then(response =>
    response.data.map(data2 => ({
      IDA: `${data2.id}`,
      Value: `${data2.value}`,


    }))
  )
  .then(data2 => {
    if (data2==''){
      this.setState({ isLoadingdane: false });
    }
    else{
      this.setState({ data2, isLoadingdane: true});
    }
  })
  .catch(error => this.setState({ error }));

}

maping table in render

    <tbody className="row">
{ this.state.isLoadingdane ? (

 data2.map(user => {
  const { IDA, Value } = user;
  return (
      <tr id={IDA}>
        <td ><p>{IDA}</p></td>
        
        <td >
        <input id={IDA} type="text" className="form-control" size="1" name="wnio" onChange={this.ChangeWniosek} value={Value} ></input>
        </td>
        <td >
          <button  onClick={() => this.edit(user)} type="button" className="btn btn-light">Zapisz</button>
        </td>
        
      </tr>

      );

Post method work's, the change is saved on the server

Answer 1

You need to find the currently modified object from the data2 array and replace modified Value with new value.

The input value is number 8 forever because you taking value of input from data2 object which is left unmodified on changing:

const {IDA, Value} = user;
<input id={IDA} type="text" className="form-control" size="1" name="wnio" onChange={this.ChangeWniosek} value={Value} ></input>```

Only if you find and modify the value in data2 object during onChange, you will be able to see the new value reflect.

EXAMPLE:

<input id={IDA} type="text" className="form-control" size="1" name="wnio" onChange={(e) => this.ChangeWniosek(e)} value={Value} ></input>

In the function:

ChangeWniosek = (e) => {
  let { data2 } = this.state;
  data2 = data2.map(obj => {
    if (obj.IDA === e.target.id) {
      obj.Value = event.target.value
    }
    return obj;
  });
  this.setState({
    data2,
    Value: event.target.value
  });
}

Let me know if this works.