TableUser.js

import React, { Component } from 'react'
import { Alert, Container, Row, Col, Table,Progress, Button, ButtonGroup} from 'reactstrap';
import { Link } from 'react-router-dom';
import api from './Api';

export default class TableUser extends Component {
    constructor(props){
        super(props);
        this.deleteContact = this.deleteContact.bind(this);
        this.state = {
          users: [],
          isLoading: false
        }
      }
    componentDidMount(){
        this.setState({ isLoading: true});
        api.loadUser().then((res)=>
        this.setState({
            isLoading: false,
            users: res.data
        })
        );
    }
    showUsers(users){
        return(
            <tr>
                <td>{users.nome}</td>
                <td>{users.email}</td>
                <td>{users.telefone}</td>
                <td>
                    <ButtonGroup>
                        <Link className='btn btn-primary' to={`/edit/${users.id}`}>Editar</Link>
                        <Button color="danger" onClick={()=> this.deleteContact(users.id)}>Apagar</Button>
                    </ButtonGroup>
                </td>
          </tr>
        );
    }
    deleteContact(id){
        alert(id);
    }

    render() {
        return (
            <Container>
                <Row>
                <Col sm="12" md={{ size: 10, offset: 1 }}>
                    <Alert color="primary" style={{marginTop: '2%',}}>
                        Seja bem-vindo João Pedro
                    </Alert>
                    <Table striped>
                        <thead>
                            <tr>
                            <th>Nome</th>
                            <th>E-mail</th>
                            <th>Telefone</th>
                            <th>Ação</th>
                            </tr>
                        </thead>
                        <tbody>
                            {
                                this.state.isLoading &&
                                <h4 className='text-center'>Aguarde....</h4>
                            }
                            {
                                !this.state.isLoading &&
                                this.state.users.map(this.showUsers)
                            }
                        </tbody>
                    </Table>
                </Col>
                </Row>
                <Row>
            </Row>
        </Container>
        )
    }
}