Как получить сумму строки с помощью ReactJS?

Question

У меня есть динамическая таблица, как вы видите на рисунке ниже:

Я пытаюсь отобразить значение «Общий итог», но оно всегда равно 0. Это сумма итогов для каждой строки.

Мой код ниже:

class AjouterFacture extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rowData: [],
      alert: null,
      Produits: [],
      QuantiteF: "",
      Prix: [],
      id: 0,

      displayedPrice: 0
    };

    this.handleRowDelete = this.handleRowDelete.bind(this);
    this.handleRowAdd = this.handleRowAdd.bind(this);
    this.getTotal = this.getTotal.bind(this);
    this.handleselectprdtChange = this.handleselectprdtChange.bind(this);
    this.PrixDisplay = this.PrixDisplay.bind(this);
    this.handleQuantiteChange = this.handleQuantiteChange.bind(this);
  }
  componentWillReceiveProps(nextProps) {
    console.log("nextProps", nextProps);
  }
  componentDidMount() {

    axios({
      method: "get",
      url: "/app/getNomprod/",
      withCredentials: true,
    }).then(response => {
      if (response && response.data) {
        this.setState({
          Produits: response.data
        });
      }
    }).catch(error => console.log(error));
  }

  handleQuantiteChange(index, value) {
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {
      QuantiteF: parseInt(value, 10)
     // QuantiteF: value

    });

    this.setState({
      rowData: rowDataCopy
    });
  }

  handleselectprdtChange(index, value) {
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy[index] = Object.assign({}, rowDataCopy[index], {
      selectprdt: value
    });
    return axios
      .get('/app/getPrixprod/' + value)
      .then(response => {
        if (response && response.data) {
          this.setState(({Prix}) => ({
            rowData: rowDataCopy,
            Prix: [...Prix, ...response.data]

          }));
        }
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    let {
      Produits
    } = this.state;
    let {
      rowData
    } = this.state.rowData;
    let {
      Prix
    } = this.state.Prix;
    return (<div className="animated fadeIn">


 <h6>  <Label ><strong>Veuillez ajouter au moins un produit :  </strong></Label></h6>
        <Table responsive style={items} >
        <thead style={back}>
                  <tr>
                    <th>PRODUIT</th>
                    <th>QUANTITE</th>
                    <th>PRIX UNITAIRE</th>
                    <th>TOTAL</th>
                    <th></th>
                  </tr>
                  </thead>
                  <tbody>
                {this.state.rowData.map((data, index) => (
              <tr key={index} id={index}>
                <td>
                  {" "}  <Input type="select" name="selectprdt" id="selectprdt"
                          placeholder="Veuillez sélectionner un produit"  value={data.selectprdt}
                    onChange={(e) => this.handleselectprdtChange(index, e.target.value)} >
           <option  key={-1} hidden>Choisisr un produit</option>


                     {  this.state.Produits.map((pdt, i) => 
                     <option key={i}>{pdt.Nomp}</option>


                     )} 


                      </Input>
                    </td>
                    <td><Input type="text" 
                          value={data.QuantiteF || 0} onChange={(e) => this.handleQuantiteChange(index, e.target.value)}/></td>


                    <td>


                    {<p key={index}>{this.state.Prix[index] && this.state.Prix[index].PrixV} </p>}

                        </td>

                <td  > 


                    { <p key={index} className='pa2 mr2 f6'>{(data.QuantiteF || 0) * ((this.state.Prix[index] && this.state.Prix[index].PrixV)|| 0)}  </p>}



                    </td>
                    <td>
                     <Button onClick={(e) => this.handleRowDelete(index)} active style={center}  size="sm" color="danger" className="btn-pill" aria-pressed="true">Effacer</Button>
      </td>{" "}
              </tr>
            ))}



                  <tr>

            <td/>
            <td/>
            <td/>
            <td/>
            <td><Button onClick={this.handleRowAdd} active style={center}  size="sm" color="info" className="btn-pill" aria-pressed="true">Ajouter une ligne</Button></td>
          </tr>
        </tbody>

        <tfoot>
          <tr>

            <th></th>
            <th >Grand total :</th>
            <th>{this.getTotal()} </th>
            <th></th>
          </tr>
</tfoot>

        </Table>


        </div>);
  }


  getTotal() {
    let grandTotal = 0;
    const rowTotals = this.state.rowData.map(row => (row.QuantiteF * row.Prix) || 0);
    if (rowTotals.length > 0) {
      grandTotal = rowTotals.reduce((acc, val) => acc + val);
    }
    return grandTotal;
  }
  handleRowDelete(row) {
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy.splice(row, 1);
    this.setState({
      rowData: rowDataCopy
    });
  }
  handleRowAdd() {
    let id = this.state.id;
    id = id++;
    const rowDataCopy = this.state.rowData.slice(0);
    rowDataCopy.push({
      selectprdt: "",
      QuantiteF: 0,
      Prix: ""
    });
    this.setState({
      rowData: rowDataCopy,
      id: id
    });
  }
}
export default AjouterFacture;

Мой бэкэнд:

exports.ajouterfact = function(req, res) {
    console.log("req", req.body);
    var today = new Date();

    var factures = {

        "Nomp": req.body.Nomp,
        "QuantiteF": req.body.QuantiteF,

    }
    connection.query('INSERT INTO factures SET ?', factures, function(error, results, fields) {
        if (error) {
            console.log("error ocurred", error);
            res.send({
                "code": 400,
                "failed": "error ocurred"
            })
        }
        else {
            //  console.log('The solution is: ', results);
            res.send({
                "code": 200,
                "success": "facture registered sucessfully"
            });
        }

    })
};

Мой стол:

CREATE TABLE factures (
 Nomp varchar(20) REFERENCES produits (Nomp),
 QuantiteF  varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci ;

Я хочу получить сумму от каждой строки! Мой сценарий - когда я выбираю название продукта, будет отображаться его цена, а когда я добавляю количество, отображается полный столбец! Я хочу отобразить сумму суммы для каждой строки.

Как я могу это исправить, пожалуйста?