Typeerror: values.reduce is not a Function

Question

I need to sum up the values of several objects from within a list.

For this, I made a map go through my list and set that if the object has the true property it should do a reduce of all these objects and sum them up.

But at the end I come across:

TypeError: valores.reduce is not a function

How can I fix this?

import React, { Component, } from 'react'
import {Table } from 'react-bootstrap'

import {consultarExtrato} from '../../services/Extrato/index'
            
let saldo = window.localStorage.getItem('saldo');

class Teste extends Component   {
    
    

    
    constructor(props){
        super(props);

        this.state = {
            //Array que recebe os Itens da API
            transacoes: [],     
        }   
    }

    componentDidMount(){
        consultarExtrato().then(dados => this.setState({transacoes: dados}))  
    }

    
    
    render() {
        return (
            
        <div>
            {
            //Tabela com os dados
            }
           <Table striped bordered hover variant="dark">
            <tbody>
                { 
                  this.state.transacoes.map((item)  => {
                    
        
                          var valores = item.valor

                          if(item.credito){

                           function sum(acc, val){
                               return acc + val
                           }

                           let resposta = valores.reduce(sum)
                           
                            return (
                                
                            <td>{resposta}</td>
                                
                               )
                          }

                         })
                }
            </tbody>
            </Table> 
        </div>
        )
    }
    
}

export default Teste;

Answer 1

You need to show the sum, then you need to do the same as Javascript does with the method reduce where your default syntax:

array.reduce(callback( acumulador, valorAtual[, index[, array]] )[, valorInicial]))

ref. Javascript Demo: Array.reduce().

Demonstrating a very simple example:

const lista = [
  {valor: 100},
  {valor: 200},
  {valor: 50},
  {valor: 110},
  {valor: 160},
  {valor: 200},
];

const soma = lista.reduce((a,b) => a + b.valor, 0);
console.log(soma);

In the code of your question that is asked by the library React is as follows:

class Teste extends React.Component {
    constructor(props){
        super(props);
        this.state = {            
            transacoes: [], 
            soma: 0
        }   
    }

    componentDidMount(){
      const dados = [
      {
        "empresaId": 1,
        "dataTransacao": "2020-09-01T09:50:00",
        "valor": 5000.0,
        "finalCartao": null,
        "tipoTransacao": "TED_IN",
        "descricaoTransacao": "Transferencia recebida",
        "estabelecimento": null,
        "credito": true,
    },
    {
        "empresaId": 1,
        "dataTransacao": "2020-09-01T10:50:00",
        "valor": 5000.1,
        "finalCartao": null,
        "tipoTransacao": "SLIP_IN",
        "descricaoTransacao": "Deposito por Boleto",
        "estabelecimento": null,
        "credito": true,
    },
    {
        "empresaId": 1,
        "dataTransacao": "2020-09-01T19:50:00",
        "valor": 159.99,
        "finalCartao":"0122",
        "tipoTransacao": "CARD",
        "descricaoTransacao": "Compra com cartão de crédito",
        "estabelecimento": "FACEBOOK",
        "credito": false,
    },

      ];
      this.setState({transacoes: dados}, 
        () => this.calcularSoma(true)
      );
    }   
    calcularSoma(credito) {
      const soma = this.state.transacoes
        .reduce((a,b) => {
          if (b.credito === credito) {
            return a + b.valor
          }
          return a;
        }, 0);
      this.setState({soma});
    }
    render() {
        return (            
          <div>Soma: {this.state.soma}</div>
        )
    }    
}

ReactDOM.render( <Teste/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root">Carregando ...</div>

When setting the state to transacoes a function was created to update the state of the sum variable as of the excerpt below:

this.setState({transacoes: dados}, 
    () => this.calcularSoma(true) // executado depois de atualizar transacoes
);

and in the method calcularSoma with parameter credito for verdadeiro or falso with reduce:

calcularSoma(credito) {
  const soma = this.state.transacoes
    .reduce((a,b) => {
      if (b.credito === credito) {
        return a + b.valor
      }
      return a;
    }, 0);
  this.setState({soma});
}

this example is that you must adapt to your code.