Que tal me gustaría que me ayudaran a poder sumar la columna de una tabla en react que se muestre automáticamente al mostrar los datos. Soy nuevo en el desarrollo con React y me he topado con esta problemática.
saludos.
este es mi código que estoy implementando.
muestro mi cabecera de la tabla.
<thead>
<tr>
<th>CODIGO</th>
<th>CONCEPTO</th>
<th>MARCA</th>
<th className="text-center">CANTIDAD</th>
<th>UNIDAD</th>
<th className="text-right">P.U.MXN</th>
<th className="text-right">DESCUENTO</th>
<th className="text-right">IMPORTE</th>
<th className="text-right">P.U.USD</th>
<th className="text-right">COD. FISCAL</th>
</tr>
</thead>
Aquí lleno mi tabla.
<tbody>
{Object.keys(products).map((key) => (
<tr key={products[key].id}>
<td>{products[key].codigo_fabrica}</td>
<td>{products[key].descripcion}</td>
<td>{products[key].marca}</td>
<td>{products[key].cantidad}</td>
<td>{products[key].unidad}</td>
<td>${products[key].precio}</td>
<td>{/* <input/> */}</td>
<td>{/* <input/> */}</td>
<td>{/* <input/> */}</td>
<td></td>
<td>
<button onClick={() => removeProduct(key)} className="btn btn-danger"><i class="fa fa-trash"/></button>
</td>
</tr>
)}
</tbody>
en esta parte es dónde quiero mostrar los resultados de la suma.
<tfoot>
<tr>
<td colSpan={7} className="text-right">
<strong>TOTAL</strong>
</td>
<td className="text-right">
<strong>$ </strong>
</td>
</tr>
</tfoot>