Estoy intentando armar una tabla de ingresos y gastos para practicar con React, pero me veo perdido al querer sumar todos los precios para poder calcular un Resultado total de las operaciones y mostrarlo en la aplicación.
{
"gastos": [
{
"descripcion": "Sellos",
"precio": "1000",
"fecha": "2020-11-30",
"id": 1
},
{
"descripcion": "Telas",
"precio": "1500",
"fecha": "2020-11-30",
"id": 2
}
],
Los datos los saco de una base de datos, como la de arriba. Pero al momento de iterar cada precio y tratar de ejecutar la funcion de suma, me devuelve valor de undefined.
renderTable = () => {
return this.props.gastos.map((gasto) => {
const fecha = moment(gasto.fecha).format("DD-MM-yyyy");
return (
<React.Fragment key={gasto.id}>
<tr>
<th>{gasto.descripcion}</th>
<th>$ {gasto.precio}</th>
<th>{fecha}</th>
<th className="text-center">
<a
href={`/gastos/edit/${gasto.id}`}
className="btn btn-primary mx-1"
>
<i className="fas fa-pen"></i>
</a>
<button
onClick={() => this.props.eliminarGasto(gasto.id)}
className="btn btn-danger mx-1"
>
<i className="fas fa-times-circle"></i>
</button>
</th>
</tr>
</React.Fragment>
);
});
};
render() {
return (
<div className="col-md-6">
<h1 className="text-center">Gastos</h1>
<table
style={{ width: "100%" }}
className="table table-striped table-bordered"
>
<thead className="thead-dark">
<tr>
<th scope="col">Descripcion</th>
<th scope="col">Precio</th>
<th scope="col">Fecha</th>
<th scope="col">Accion</th>
</tr>
</thead>
<tbody>
{this.renderTable()}
<tr>
<th>Total Gastos</th>
<th>total Suma</th>
</tr>
</tbody>
</table>
<hr />
<Link to="/gastos/new" className="btn btn-primary">
Agregar Gasto
</Link>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
gastos: Object.values(state.gastos)
};
};
export default connect(mapStateToProps, {
listarGastos,
eliminarGasto,
`})(Gastos);
Estoy utilizando redux, por lo que estoy en duda si tengo que agregar nuevos reductores y acciones o si es posible destructurar la tabla de precios de la base de datos y crear una nueva variable con la suma del total