title: Total for columns in dynamic table using ReactJS
body: <p>My issue is when I enter the values of Quantity and Price to calculate the total, it will be calculated, but when I add another line, the total value is calculated from the last entered values of Quantity and Price as shown in the figure below :</p>
  
  <p><a href="https://i.stack.imgur.com/22GFe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/22GFe.png" alt="enter image description here"></a></p>
  
  <p>My code is below :</p>
  
  <pre><code>        class AjouterFacture extends Component {
            constructor(props) {
              super(props);
              this.state = {
                rowData: [],
                Produits: [],
                Quantite: "",
                Prix: ""
              };
  
              this.handleRowChange = this.handleRowChange.bind(this);
              this.handleRowDelete = this.handleRowDelete.bind(this);
              this.handleRowAdd = this.handleRowAdd.bind(this);
              this.getTotal = this.getTotal.bind(this);
              this.pushToCaller = this.pushToCaller.bind(this);
            }
    handleQuantiteChange(e) {
          this.setState({
            Quantite: e.target.value
          }, this.pushToCaller);
        }
        handleselectprdtChange(e) {
          this.setState({
            selectprdt: e.target.value
          }, this.pushToCaller);
        }
        handlePrixChange(e) {
          this.setState({
            Prix: e.target.value
          }, this.pushToCaller);
        }
  
            pushToCaller() {
              this.handleRowChange( {
                Quantite: parseInt(this.state.Quantite, 10),
                selectprdt: this.state.selectprdt,
                Prix: parseFloat(this.state.Prix),
              });
            }
  
  
            render() {
  
              return (&lt;div className="animated fadeIn"&gt;
  
  
           &lt;h6&gt; Veuillez ajouter au moins un produit : &lt;/h6&gt;
                  &lt;Table  &gt;
                  &lt;thead &gt;
                            &lt;tr&gt;
                              &lt;th&gt;PRODUIT&lt;/th&gt;
                              &lt;th&gt;QUANTITE&lt;/th&gt;
                              &lt;th&gt;PRIX UNITAIRE&lt;/th&gt;
                              &lt;th&gt;TOTAL&lt;/th&gt;
                              &lt;th&gt;&lt;/th&gt;
                            &lt;/tr&gt;
                            &lt;/thead&gt;
                            &lt;tbody&gt;
                          {this.state.rowData.map((index) =&gt;
  
                          &lt;tr key={index} id={index} 
                          onChange={this.handleRowChange}&gt;
  
  
                   &lt;td&gt; &lt;Input type="select" name="selectedcl" id="selectcl"
                                    placeholder="Veuillez sélectionner un produit"  value={this.state.rowData.selectprdt}
                    onChange={this.handleselectprdtChange} &gt;
                     &lt;option  key={-1} hidden&gt;Choisisr un produit&lt;/option&gt;
  
  
                               {  this.state.Produits.map((pdt, i) =&gt; 
                               &lt;option key={i} &gt;{pdt.Nomp}&lt;/option&gt;
                               )} 
  
  
                                &lt;/Input&gt;
                              &lt;/td&gt;
                              &lt;td&gt;&lt;Input type="number" 
                                    placeholder="0" value={this.state.rowData.Quantite} onChange={this.handleQuantiteChange}/&gt;&lt;/td&gt;
                              &lt;td&gt;
                                   &lt;InputGroup &gt;&lt;Input type="text" 
                                    value={this.state.rowData.Prix} onChange={this.handlePrixChange} /&gt;
                                    &lt;InputGroupAddon addonType="prepend"&gt;
                                        &lt;InputGroupText&gt;&lt;i &gt;&lt;/i&gt;&lt;/InputGroupText&gt;
                                      &lt;/InputGroupAddon&gt;
                                           &lt;/InputGroup &gt;
                                    &lt;/td&gt;
  
                              &lt;td &gt;
                               &lt;p &gt;{this.state.Quantite * this.state.Prix}  &lt;/p&gt;
  
                              &lt;/td&gt;
                              &lt;td&gt;
                               &lt;Button onClick={this.handleRowDelete} active style={center} &gt;Effacer&lt;/Button&gt;
                &lt;/td&gt; &lt;/tr&gt; )} 
  
  
  
                            &lt;tr&gt;
  
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;/td&gt;
                      &lt;td&gt;&lt;Button onClick={this.handleRowAdd} &gt;Ajouter une ligne&lt;/Button&gt;&lt;/td&gt;
                    &lt;/tr&gt;
                  &lt;/tbody&gt;
  
                  &lt;tfoot&gt;
                    &lt;tr&gt;
  
                      &lt;th&gt;&lt;/th&gt;
                      &lt;th &gt;Grand total :&lt;/th&gt;
                      &lt;th&gt;{this.getTotal()} &lt;/th&gt;
                      &lt;th&gt;&lt;/th&gt;
                    &lt;/tr&gt;
          &lt;/tfoot&gt;
  
                  &lt;/Table&gt;
  
  
                  &lt;/div&gt;);
            }
            getTotal() {
              let grandTotal = 0;
              const rowTotals = this.state.rowData.map(row =&gt; this.state.Quantite *  this.state.Prix);
              if (rowTotals.length &gt; 0) {
                grandTotal = rowTotals.reduce((acc, val) =&gt; acc + val);
              }
              return grandTotal;
            }
           handleRowChange(row, data) {
              const rowDataCopy = this.state.rowData.slice(0);
              rowDataCopy[row] = data;
              this.setState({
                rowData: rowDataCopy
  
              });
            }  
            handleRowDelete(row) {
              const rowDataCopy = this.state.rowData.slice(0);
              rowDataCopy.splice(row, 1);
              this.setState({
                rowData: rowDataCopy
              });
            }
           handleRowAdd() {
              const rowDataCopy = this.state.rowData.slice(0);
              rowDataCopy.push({selectprdt:'', Quantite : "", Prix :"" });
              this.setState({
                rowData: rowDataCopy
              });
            }
  
          }
          export default AjouterFacture;
  </code></pre>
  
  <p>I want the total column will be calculated for each row.</p>
  
  <p>How can I correct that please? </p>