0

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

1
  • Dónde estas realizando la suma? Commented el 1 dic. 2020 a las 12:24

1 respuesta 1

1

Lo pude solucionar con la función reduce.. Comparto abajo la solución.

renderSuma(){ 
    return this.props.gastos.reduce((acc, curr)=> acc + parseInt(curr.precio), 0)
  }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.