text: import React, { Component } from 'react';
  
  class Vehicles extends Component{
  
      // call updateVehicles (App.js)
      handleUpdate = () => {
          this.props.updateVehicle(this.indexNum, this.id.value, this.make.value, this.model.value, this.year.value, this.variant.value);
      }
  
  
      render(){
  
          const {allVehicles, pressEditBtn, pressDelete} = this.props;
  
          const vehiclesList = allVehicles.map((vehicle, index) => {
              return vehicle.isEditing === true ? (
                  <tr  key={index}>
                      <td><input readonly type="readonly" ref={(val) => {this.id = val}} required defaultValue={vehicle.id}/></td>
                      <td><input type="text" ref={(val) => {this.make = val}} required defaultValue={vehicle.make}/></td>
                      <td><input type="text" ref={(val) => {this.model = val}} required defaultValue={vehicle.model}/></td>
                      <td><input type="number" ref={(val) => {this.year = val}} required defaultValue={vehicle.year}/></td>
                      <td><input type="text" ref={(val) => {this.variant = val}} required defaultValue={vehicle.variant}/></td>
  
                      <td>
                      <input type="button" value="Update" onClick={this.handleUpdate} ref={() => {this.indexNum = index}} className="btn green"/>
                      </td>
                  </tr>  
  
              ) : (
  
                  <tr  key={index}>
                      <td>{vehicle.id}</td>
                      <td>{vehicle.make}</td>
                      <td>{vehicle.model}</td>
                      <td>{vehicle.year}</td>   
                      <td>{vehicle.variant}</td>
                      <td><button className="btn white black-text" onClick={() => pressEditBtn(index)}>Edit</button>  |  <button className="btn red" onClick={()=>pressDelete(index)}>Delete</button></td>
                  </tr>
  
              );
          });
  
          return(
              <table className="striped">
                  <thead>
                      <tr>
                      <th>Id</th>
                      <th>Make</th>
                      <th>Model</th>
                      <th>Year</th>
                      <th>Variant</th>
                      </tr>
                  </thead>
                  <tbody>
                      {vehiclesList}
                  </tbody>
              </table>
          );
      }
  }
  
  export default Vehicles;