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
JSX
x
24
24
1
import React from 'react';2
import './App.css';3
import Nav from './components/Nav';4
import Footer from './components/Footer';5
import NavData from './models/NavData';6
7
class App extends React.Component {8
constructor(props) {9
super(props);10
this.state = { navData : NavData };11
}12
render() {13
return (14
<div className="App">15
<header className="App-header">16
<Nav navData={this.state.navData}/>17
</header>18
<Footer />19
</div>20
);21
}22
}23
24
export default App;Here is our JSON data:
JSX
xxxxxxxxxx1
104
104
1
const FlightData = [2
{3
"id":1,4
"airline":"United Airlines",5
"flight_no":"UA1234",6
"trip_type":"Round Trip",7
"departure_airport":"ORD",8
"arrival_airport":"LAX",9
"departure_date":"2019-06-24",10
"return_date":"2019-06-25"11
},12
{13
"id":2,14
"airline":"American Airlines",15
"flight_no":"AA1952",16
"trip_type":"One Way",17
"departure_airport":"LAX",18
"arrival_airport":"ABQ",19
"departure_date":"2019-06-25",20
"return_date":"2019-06-26"21
},22
{23
"id":3,24
"airline":"Southwest Airlines",25
"flight_no":"WN4307",26
"trip_type":"Round Trip",27
"departure_airport":"ORD",28
"arrival_airport":"DEN",29
"departure_date":"2019-06-25",30
"return_date":"2019-06-26"31
},32
{33
"id":4,34
"airline":"Alaska Airlines",35
"flight_no":"AS1677",36
"trip_type":"One Way",37
"departure_airport":"BOS",38
"arrival_airport":"CLT",39
"departure_date":"2019-06-27",40
"return_date":"2019-06-28"41
},42
{43
"id":5,44
"airline":"Hawaiian Airlines",45
"flight_no":"HA4233",46
"trip_type":"Round Trip",47
"departure_airport":"HNL",48
"arrival_airport":"LAX",49
"departure_date":"2019-06-28",50
"return_date":"2019-06-29"51
},52
{53
"id":6,54
"airline":"Virgin Atlantic",55
"flight_no":"VS1980",56
"trip_type":"Round Trip",57
"departure_airport":"SEA",58
"arrival_airport":"LHR",59
"departure_date":"2019-06-29",60
"return_date":"2019-07-02"61
},62
{63
"id":7,64
"airline":"Korean Air",65
"flight_no":"KE5233",66
"trip_type":"One Way",67
"departure_airport":"ORD",68
"arrival_airport":"ICN",69
"departure_date":"2019-06-28",70
"return_date":"2019-07-02"71
},72
{73
"id":8,74
"airline":"Delta Air Lines",75
"flight_no":"DL1889",76
"trip_type":"One Way",77
"departure_airport":"MIA",78
"arrival_airport":"ORD",79
"departure_date":"2019-07-01",80
"return_date":"2019-07-02"81
},82
{83
"id":9,84
"airline":"Malasia Airlines",85
"flight_no":"MH9880",86
"trip_type":"Round Trip",87
"departure_airport":"JFK",88
"arrival_airport":"KUL",89
"departure_date":"2019-06-29",90
"return_date":"2019-07-03"91
},92
{93
"id":10,94
"airline":"Air New Zealand",95
"flight_no":"NZ8029",96
"trip_type":"One Way",97
"departure_airport":"DEN",98
"arrival_airport":"ALR",99
"departure_date":"2019-06-28",100
"return_date":"2019-07-02"101
}102
]103
104
export default FlightData;
