Create A Flight List Table in React (Three Part Series)
March 26, 2020
Part 3: We’ll add the JSON data to a property called FlightData and import it to our root App component. Then we’ll pass this property to the template where it will be parsed and displayed to the Flight List table. Finally, we’ll make sure that the Edit and Delete buttons for each record are assigned the property id’s for editing and deleting to be performed.
The final state of our App.js after Part 3.
JSX
x
86
86
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
import FlighData from './models/FlightData';7
8
class App extends React.Component {9
constructor(props) {10
super(props);11
this.state = { navData: NavData, flightData: FlighData };12
this.deleteFlight = this.deleteFlight.bind(this);13
}14
15
deleteFlight(id) {16
console.log(id);17
}18
render() {19
return (20
<div className="App">21
<Nav navData={this.state.navData} />22
23
<div className="container">24
<div className="row mb5">25
26
<h1 className="text-left">Flight Schedule</h1>27
<div className="table-responsive border p-4 bg-light rounded">28
<p className="text-left font-weight-bold">Active Flight Schedule</p>29
<table className="table table-hover">30
<thead className="table-borderless table-secondary">31
<tr>32
<th scope="col">No.</th>33
<th scope="col">Airline</th>34
<th scope="col">Flight Number</th>35
<th scope="col">Trip Type</th>36
<th scope="col">Departure Airport</th>37
<th scope="col">Arrival Airport</th>38
<th scope="col">Departure Date</th>39
<th scope="col">Arrival Date</th>40
<th scope="col" style={{width:'150px'}}>Actions</th>41
</tr>42
</thead>43
<tbody>44
{this.state.flightData.map(flight => {45
return (46
<tr key={flight.id}>47
<td scope="row">{flight.id}</td>48
<td>{flight.airline}</td>49
<td>{flight.flight_no}</td>50
<td>{flight.trip_type}</td>51
<td>{flight.departure_airport}</td>52
<td>{flight.arrival_airport}</td>53
<td>{flight.departure_date}</td>54
<td>{flight.return_date}</td> 55
<td>56
<a type="button"57
className="btn btn-success btn-just-icon btn-sm" 58
href={"/edit/" + flight.id}>Edit</a>59
60
<button onClick={()=>{61
this.deleteFlight(flight.id)}} 62
type="button" 63
className="btn btn-sm btn-danger ml-2">64
Delete65
</button>66
</td>67
</tr>68
);69
})70
71
}72
73
</tbody>74
</table>75
</div>76
</div>77
78
</div>79
80
<Footer />81
</div>82
);83
}84
}85
86
export default App;
