ReactJs: Input value doesn't change because due to using Array.map

Question

This is the table body:

<tbody>
  {this.state.composantInformation.map(composantInformation => {
    return (
      <tr key={composantInformation.id.toString()}>
        <td>{composantInformation.nom_composant}</td>
        <td>{composantInformation.categorie}</td>
        <td>{composantInformation.description}</td>
        <td>{composantInformation.ref}</td>
        <td>
          <NumericInput
            min={0}
            max={100}
            value={composantInformation.qte}
            onChange={this.onQuantiteChange}
          />
        </td>
      </tr>
    );
  })}
</tbody>;

This is the state:

this.state = {
  produitInformation: [],
  composantInformation: [],
  produitId: 0,
  produitQte: 0
};

This is where the Backend API request is made:

componentDidMount() {
  getProduitDataFromDB()
    .then(result => {
      this.setState({
        produitInformation: result.data
      });
    })
    .catch(error => console.error("(1) Outside error:", error));
}

And this is the result:

In the last column, when I click on Increment/Decrement, the value gets increased and then goes back to 0.
I believe this has something to do with the fact that I am using map to display the table data.

{
  this.state.produitInformation.map(produitInformation => {
    return (
      <tr
        key={produitInformation.id.toString()}
        produitid={produitInformation.id.toString()}
        onClick={this.onTableRowClick}
      >
        <td>{produitInformation.nom_produit}</td>
        <td>{produitInformation.prix}</td>
        <td>{produitInformation.categorie}</td>
        <td>{produitInformation.description}</td>
        <td>
          <NumericInput
            min={0}
            max={100}
            value={produitInformation.qte}
            tablerow={5}
            onChange={this.onQuantiteChange}
          />
        </td>
      </tr>
    );
  });
}

Since the value inside NumericInput is not associated directly with a state value. Any idea how to solve this?

satheesh m · Accepted Answer · 2020-03-02 14:19:19Z

1

You need to update the specific array element where the increase has happened, so need two parameters one to identify the element using id, and another is value

onQuantiteChange(id, value){

const newData = this.state.produitInformation.map(d => {
if(d.id === id) {
return {...d, qte: value}
}
return d;
})
this.setState({produitInformation: newData})
}

Also change

<td>
                            <NumericInput
                              min={0}
                              max={100}
                              value={produitInformation.qte}
                              tablerow={5}
                              onChange={(val) => this.onQuantiteChange(produitInformation.id, val)}
                            />
                          </td>

answered Mar 2, 2020 at 14:19

satheesh m

4515 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saleh Almohtaseb · Accepted Answer · 2020-03-02 14:11:34Z

0

you need to make a state for the NumericInput value for and onChange on that NumericInput you need to set the new state inorder for the value to change

answered Mar 2, 2020 at 14:11

Saleh Almohtaseb

916 bronze badges

Collectives™ on Stack Overflow

ReactJs: Input value doesn't change because due to using Array.map

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related