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

In this three-part video series, we’re going to build the table for our Flight App. We’ll be using a bootstrap table to make our table responsive and modern. Below is the table that we’ll be building.

Here is our starter file: App.js

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { navData : NavData };
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Nav navData={this.state.navData}/>
        </header>
        <Footer />
      </div>
    );
  }
}

export default App;

Here is our JSON data:

const FlightData = [
    {
        "id":1,
        "airline":"United Airlines",
        "flight_no":"UA1234",
        "trip_type":"Round Trip",
        "departure_airport":"ORD",
        "arrival_airport":"LAX",
        "departure_date":"2019-06-24",
        "return_date":"2019-06-25"
    },
    {
        "id":2,
        "airline":"American Airlines",
        "flight_no":"AA1952",
        "trip_type":"One Way",
        "departure_airport":"LAX",
        "arrival_airport":"ABQ",
        "departure_date":"2019-06-25",
        "return_date":"2019-06-26"
    },
    {
        "id":3,
        "airline":"Southwest Airlines",
        "flight_no":"WN4307",
        "trip_type":"Round Trip",
        "departure_airport":"ORD",
        "arrival_airport":"DEN",
        "departure_date":"2019-06-25",
        "return_date":"2019-06-26"
    },
    {
        "id":4,
        "airline":"Alaska Airlines",
        "flight_no":"AS1677",
        "trip_type":"One Way",
        "departure_airport":"BOS",
        "arrival_airport":"CLT",
        "departure_date":"2019-06-27",
        "return_date":"2019-06-28"
    },
    {
        "id":5,
        "airline":"Hawaiian Airlines",
        "flight_no":"HA4233",
        "trip_type":"Round Trip",
        "departure_airport":"HNL",
        "arrival_airport":"LAX",
        "departure_date":"2019-06-28",
        "return_date":"2019-06-29"
    },
    {
        "id":6,
        "airline":"Virgin Atlantic",
        "flight_no":"VS1980",
        "trip_type":"Round Trip",
        "departure_airport":"SEA",
        "arrival_airport":"LHR",
        "departure_date":"2019-06-29",
        "return_date":"2019-07-02"
    },
    {
        "id":7,
        "airline":"Korean Air",
        "flight_no":"KE5233",
        "trip_type":"One Way",
        "departure_airport":"ORD",
        "arrival_airport":"ICN",
        "departure_date":"2019-06-28",
        "return_date":"2019-07-02"
    },
    {
        "id":8,
        "airline":"Delta Air Lines",
        "flight_no":"DL1889",
        "trip_type":"One Way",
        "departure_airport":"MIA",
        "arrival_airport":"ORD",
        "departure_date":"2019-07-01",
        "return_date":"2019-07-02"
    },
    {
        "id":9,
        "airline":"Malasia Airlines",
        "flight_no":"MH9880",
        "trip_type":"Round Trip",
        "departure_airport":"JFK",
        "arrival_airport":"KUL",
        "departure_date":"2019-06-29",
        "return_date":"2019-07-03"
    },
    {
        "id":10,
        "airline":"Air New Zealand",
        "flight_no":"NZ8029",
        "trip_type":"One Way",
        "departure_airport":"DEN",
        "arrival_airport":"ALR",
        "departure_date":"2019-06-28",
        "return_date":"2019-07-02"
    }
]
 
export default FlightData;