Create A Flight List Table in React (Three Part Series)
March 26, 2020
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;
