ListeClients.js

import React, { Component } from 'react';
import { Badge, Card, CardBody, CardHeader, Col, Pagination, PaginationItem, PaginationLink, Row, Table } from 'reactstrap';
import Modal from 'react-modal';
import axios from 'axios';
import ListeClientFooter from '../../../containers/DefaultLayout/ListeClientFooter.js';



class ListeClients extends Component {


  constructor(props) {
    super(props);
    this.state = {
      clients: [],
       Code: '1111'
    };
    this.handleView = this.handleView.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
  }

  componentDidMount() {
    axios({
        method: "get",
        url: "/app/listeclients/",
        withCredentials: true,
        headers: {
          "Access-Control-Allow-Origin": "*",
          "Content-Type": "application/json",
          Accept: "application/json"
        }
      })
      .then(response => {
        if (response && response.data) {
          this.setState({ clients: response.data });
        }
      })
      .catch(error => console.log(error));
  }

/*handleViewB(Code) {
   this.props.history.push('/clients/viewclient/');
}*/
handleView(event) {
    try {
    const   Code =this.state.Code
      console.log("Voir client")
      this.props.history.push(`/clients/viewclient/${Code}`);
      // Do something that could throw
    }
    catch (error) {
      this.setState({ error });
    }
  }
  handleEdit(event) {
    try {
    console.log("Modifier client")
    this.props.history.push('/clients/editclient/');
    // Do something that could throw
     } catch (error) {
       this.setState({ error });
     }
  }
  // event.preventDefault;





  render() {
    let { clients } = this.state;
    var btn = {
      backgroundColor: 'Transparent',
      backgroundRepeat: 'no-repeat',
      border: 'none',
      cursor: 'pointer',
      overflow: 'hidden',
      outline: 'none'
    }
    var center = {
      textAlign: "center"
    }
    return (
      <div className="animated fadeIn">
       
          
            <Card style={{ height:"420px"}}>
              <CardHeader>
                <h4>
                  <strong>
                    <i className="fa fa-align-justify" /> Tous les clients
                  </strong>
                </h4>
              </CardHeader>
              <CardBody>
              
                    <Table  bordered responsive size="sm" style={center}>
                      <thead >
                        <tr>
                          <th ><strong>Code</strong></th>
                          <th>Prenom</th>
                          <th>Nom</th>
                          <th>Email</th>
                          <th>Telephone</th>
                          <th>Action</th>
                        </tr>
                      </thead>
                      <tbody>
                        {
                          clients.map(client => (
                            <tr key={client.Code}>
                              <td>{client.Code} </td>
                              <td>{client.Prenom}</td>
                              <td>{client.Nom}</td>
                              <td>{client.Email}</td>
                              <td>{client.Telephone}</td>
                              <td>
                                <button style={btn}   onClick={this.handleView} type="button"><i class="fa fa-eye"></i></button>
                                <button style={btn} onClick={this.handleEdit} type="button"><i class="fa fa-edit"></i></button>
                                <button style={btn}><i class="fa fa-trash-o"></i></button>
                              </td>
                            </tr>
                          ))}
                      </tbody>
                    </Table>
              
              </CardBody>
            </Card>
         
        
         
      </div>
    );
  }
}

export default ListeClients;