.Net Core - ReactJS - Listando dados de uma API

Na aula de hoje iremos listar os dados de uma API.

Vamos inserir um construtor no componente Clientes e incluir algumas propriedades, para que possamos fazer uma requisição para a API de clientes e mostrar a lista de clientes.

Vamos utilizar o método componentDidMount(), para que a requisição seja feita quando o componente estiver montado.

Iremos utilizar o axios, para fazer a requisição para a API.

      
        yarn add axios
       
    

      
        class Clientes extends Component {
          constructor(){
            super()
            this.clientes = []
          }
          componentDidMount(){
            axios.get('https://localhost:5001/clientes').then(response => {
              console.log(response);
              this.clientes = response.data
            })
          }

          render() {
            return (
                < div>
                < Header>< /Header>
                < main className="col-lg-7 mb-5">
                  < h1 className="display-5 mb-3 fw-semibold lh-sm">Lista de Clientes - { this.clientes.length }< /h1>
                  < table className="table"
                    < thead>
                      < tr>
                        < th>Nome< /th>
                        < th>Telefone< /th>
                        < th>endereço< /th>
                      < /tr>
                    < thead>
                    < tbody>
                      {
                        this.state.clientes.map((cliente, index) => (
                          < tr key={index}>
                          < td>{cliente.nome}< /td>
                          < td>{cliente.telefone}< /td>
                          < td>{cliente.endereco}< /td>
                          < td>< Link Link to={ `/cliente/${cliente.id}` } > {cliente.id} < /Link> Editar< /td>
                        < /tr>
                        ))
                      }
                    < /tbody>
                  < /table>
                < /main>
                < Footer>< /Footer>
              < /div>
              )
            }
          }
  
        export default Clientes;