API items do not appear in the Table

Question

I need to fill a table with all the items in my API, but when the process is finished the table returns empty. I did a fetch to access the API and tried to put all the items inside an array within my state called "data" and gave a setState to fill this array with the API values. Then I made a map in data to create a list within that table with each of the filled-in items. But fields return empty and error free...

I found the API that I’m using a little confusing but I’m obliged to use it... I believe the problem is in the naming given in my State array which is data and in the API the Array has no name. I do not know how to proceed.

Please this is an exercise I’m doing to learn React, but I’m stuck, can help me?

The API I’m using is running on the mocked json-server, but the structure is exactly the same as the following link: https://gitlab.com/desafio-conta-simples/developer/-/blob/master/mocks/transacoes.json

Follows the code:

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

class Extrato extends Component {        
    constructor(props){
        super(props);    
        this.state = {               
            dados: []                
        }            
    }

    componentDidMount(){
        fetch("http://localhost:3000/transacoes")
        .then(resultado => resultado.json().then(dados => this.setState(dados)))
        
    }
   
       
    render() {
        return (
        <Container>
            <Table striped bordered hover variant="dark">
                <thead>
                    <tr>
                    <th>Empresa ID</th>
                    <th>Data Transação</th>
                    <th>Valor</th>
                    <th>Final do Cartão</th>
                    <th>Tipo de Transação</th>
                    <th>Descrição da Transação</th>
                    <th>Estabelecimento</th>
                    <th>Crédito</th>
                    </tr>
                </thead>
                <tbody>
            
                {
                         this.state.dados.map((item, indice) => {
                          return (
                            <tr key={indice}>
                            <td>{item.empresaId}</td>
                            <td>{item.dataTransacao}</td>
                            <td>{item.valor}</td>
                            <td>{item.finalCartao}</td>
                            <td>{item.tipoTransacao}</td>
                            <td>{item.descricaoTransacao}</td>
                            <td>{item.estabelecimento}</td>
                            <td>{item.credito}</td>
                            </tr>
                           )
                         })
                 }
        
                    
                </tbody>
            </Table>
        </Container>
        )
    }
    
}

export default Extrato;

 

Answer 1

With the amount of doubts I decided to exemplify how your code should be, was created a fake of JSON and at the time of creation of the loaded component, then in the method render() the data contained in JSON, minimum example:

const json = [
    {
        "empresaId": 1,
        "dataTransacao": "2020-09-01T09:50:00",
        "valor": 5000.0,
        "finalCartao": null,
        "tipoTransacao": "TED_IN",
        "descricaoTransacao": "Transferencia recebida",
        "estabelecimento": null,
        "credito": true,
    },
    {
        "empresaId": 2,
        "dataTransacao": "2020-09-01T10:50:00",
        "valor": 5000.0,
        "finalCartao": null,
        "tipoTransacao": "SLIP_IN",
        "descricaoTransacao": "Deposito por Boleto",
        "estabelecimento": null,
        "credito": true,
    }
];

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      transacoes: []
    }
  }
  componentDidMount() {
    this.setState({transacoes: json});    
  }
  
  render() {
    return (
      <div>
        {this.state.transacoes.map(c => 
          <div>
            <div>{c.empresaId}</div>
            <div>{c.dataTransacao}</div>
            <hr />
          </div>
        )}
      </div>
    )
  }
}

ReactDOM.render( <App/> , 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>