text: import React, {Component} from 'react';
  import axios from "axios/index";
  import {Link} from 'react-router-dom';
  
  
  export default class Read extends Component {
  
      constructor(props) {
          super(props);
  
          this.state = {
              name: '',
              email: '',
              id: '',
              cars: [],
          }
      }
  
      /**
       * Get current user from db
       */
      componentDidMount() {
          axios.get(`http://megakit/api/users/` + this.props.match.params.id + `/edit`)
              .then(response => {
                  this.setState({
                      id: response.data.id,
                      name: response.data.name,
                      email: response.data.email,
                      cars: response.data.cars
                  });
              });
      }
  
  
      render() {
          return (
              <div className="row justify-content-center">
                  <div className="col-md-6 col-sm-8">
                      <div className="my-5">
                          <ul className="list-group">
                              <li className="list-group-item">
                                  User ID:
                                  <b className="float-right">{this.state.id}</b>
                              </li>
                              <li className="list-group-item">
                                  Name:
                                  <b className="float-right">{this.state.name}</b>
                              </li>
                              <li className="list-group-item">
                                  Email:
                                  <b className="float-right">{this.state.email}</b>
                              </li>
                              <li className="list-group-item">
                                  Cars:
                                  {(this.state.cars.length > 0) ? (
                                      <select className="float-right">
                                          {this.state.cars.map((car => {
                                              return (<option key={car.id}>{car.make + ' ' + car.model}</option>);
                                          }))}
                                      </select>
                                  ) : <b className="text-danger float-right">user haven't cars</b>}
                              </li>
                          </ul>
                          <Link className="btn btn-outline-dark btn-md my-3 float-right" to={`/users/edit/${this.state.id}`}>
                              EDIT USER <i className="fas fa-edit"/>
                          </Link>
                      </div>
                  </div>
              </div>
          );
      }
  }
  