Create A Flight List Table in React (Three Part Series)

import React from 'react';
import './App.css';
import Nav from './components/Nav';
import Footer from './components/Footer';
import NavData from './models/NavData';
import FlighData from './models/FlightData';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { navData: NavData, flightData: FlighData };
    this.deleteFlight = this.deleteFlight.bind(this);
  }

  deleteFlight(id) {
    console.log(id);
  }
  render() {
    return (
      <div className="App">
        <Nav navData={this.state.navData} />

        <div className="container">
          <div className="row mb5">

              <h1 className="text-left">Flight Schedule</h1>
              <div className="table-responsive border p-4 bg-light rounded">
                <p className="text-left font-weight-bold">Active Flight Schedule</p>
                <table className="table table-hover">
                  <thead className="table-borderless table-secondary">
                    <tr>
                      <th scope="col">No.</th>
                      <th scope="col">Airline</th>
                      <th scope="col">Flight Number</th>
                      <th scope="col">Trip Type</th>
                      <th scope="col">Departure Airport</th>
                      <th scope="col">Arrival Airport</th>
                      <th scope="col">Departure Date</th>
                      <th scope="col">Arrival Date</th>
                      <th scope="col" style={{width:'150px'}}>Actions</th>
                    </tr>
                  </thead>
                  <tbody>
                    {this.state.flightData.map(flight => {
                      return (
                        <tr key={flight.id}>
                          <td scope="row">{flight.id}</td>
                          <td>{flight.airline}</td>
                          <td>{flight.flight_no}</td>
                          <td>{flight.trip_type}</td>
                          <td>{flight.departure_airport}</td>
                          <td>{flight.arrival_airport}</td>
                          <td>{flight.departure_date}</td>
                          <td>{flight.return_date}</td>                          
                          <td>
                            <a  type="button"
                                className="btn btn-success btn-just-icon btn-sm" 
                                href={"/edit/" + flight.id}>Edit</a>

                            <button onClick={()=>{
                                this.deleteFlight(flight.id)}} 
                              type="button" 
                              className="btn btn-sm btn-danger ml-2">
                              Delete
                        </button>
                          </td>
                        </tr>
                      );
                    })

                    }

                  </tbody>
                </table>
              </div>
          </div>

        </div>

        <Footer />
      </div>
    );
  }
}

export default App;