Create A Flight List Table in React (Three Part Series)
March 26, 2020
Part 2: We’ll modify the table heading to align them with the fields in the JSON data which we will be adding. Next, we’ll create a property called “flightData” and add it to the state so we can manage it when we perform CRUD operations. We’ll also create a function called deleteFlight(id) which accepts the id of the FlightData. We need to bind this function in order to perform state update. Finally, we’ll clean up the table rows and use a map() function to prepare the iteration process to build each record dynamically.
The state of our App.js after part 2.
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, flightData: [] };
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">
<div className="col-md-12 mb-5">
<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">Actions</th>
</tr>
</thead>
<tbody>
{this.state.flightData.map( flight =>{
return(
<tr>
<td scope="row">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
<td>@mdo</td>
<td>
<a type="button" className="btn btn-success btn-just-icon btn-sm" href="/edit/id">Edit</a>
<button onClick={this.deleteFlight} type="button" className="btn btn-sm btn-danger">
Delete
</button>
</td>
</tr>
);
})
}
</tbody>
</table>
</div>
</div>
</div>
</div>
<Footer />
</div>
);
}
}
export default App;
