DELETE One Item From a List in React (Two Parts)
March 28, 2020
In this two-part video series, we’re going to implement a deleteFlight(id) function to remove a record from a property which is a part of the state property. For this exercise, we’re going to remove data from RAM only and not from a permanent data store. The best option for this operation is to use the two JavaScript built-in functions: findIndex() and splice(). First, we will use the findIndex() function to return the index position of a matching id field, then use the splice() function remove the element from the list. Finally, we’ll invoke the setState() function to update the state, thereby, making the state property “impure”. Once the state property is impure, React will re-render the DOM.
The source files are available below.
Part 1: We’ll create the implementation for the deleteFlight() function.
The source 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';
import FlighData from './models/FlightData';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { navData: NavData, flightData: FlighData };
this.deleteFlight = this.deleteFlight.bind(this);
}
deleteFlight(id) {
let temp = this.state.flightData;
let index = temp.findIndex( flight => flight.id == id);
temp.splice(index,1);
this.setState({flightData: temp});
console.log(id);
}
render() {
return (
<div className="App">
<Nav navData={this.state.navData} />
<div className="container">
<div className="row mb5">
<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" style={{width:'150px'}}>Actions</th>
</tr>
</thead>
<tbody>
{this.state.flightData.map(flight => {
return (
<tr key={flight.id}>
<td scope="row">{flight.id}</td>
<td>{flight.airline}</td>
<td>{flight.flight_no}</td>
<td>{flight.trip_type}</td>
<td>{flight.departure_airport}</td>
<td>{flight.arrival_airport}</td>
<td>{flight.departure_date}</td>
<td>{flight.return_date}</td>
<td>
<a type="button"
className="btn btn-success btn-just-icon btn-sm"
href={"/edit/" + flight.id}>Edit</a>
<button onClick={()=>{
this.deleteFlight(flight.id)}}
type="button"
className="btn btn-sm btn-danger ml-2">
Delete
</button>
</td>
</tr>
);
})
}
</tbody>
</table>
</div>
</div>
</div>
<Footer />
</div>
);
}
}
export default App;The JSON data
export 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"
}
]Pages: 1 2
