Resultado da Função é Exibido Em Diversas Linhas

JavaScript

React

17/10/2020

Preciso exibir o resultado da soma dos meus itens em apenas uma linha.

Fiz uma função para somar os valores dos de uma lista de objetos, o resultado da soma está dado certo porém ele precisa aparecer em apenas uma linha da minha tabela, agora ele está aparecendo em várias linhas.

Como posso resolver isso?

Obrigado!

Segue o código:

<Table striped bordered hover variant="dark">
            <thead>
                <tr>
                <th>Resultado</th>
                </tr>
            </thead>
            <tbody>
                


               { 
               
               
                this.state.transacoes.map((item, indice)  => {
                    
                    var total = this.state.transacoes.reduce(getTotal, 0);
                    
                    function getTotal(total, item) {
                     return total + (item.valor);

                    }

                        return (

                            
                            <tr key=>
                            <td> </td>
                            </tr>
                            
                           )
                     })

                     
                }


            </tbody>
        </Table>
Bruno Rosselli

Bruno Rosselli

Curtidas 1
POSTAR