DELETE One Item From a List in React (Two Parts)
March 28, 2020
Part 2: For this exercise, we’re going to refactor what we did in Part 1 and move the flight list table to a child component. We’ll then pass the flight data as props to the child component to render. We also pass the deleteFlight() function to the child component in order for it to send data back up to the parent to update the state.
The final state of our root component.
App.js
x
34
34
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
import FlightList from './components/FlightList';8
9
class App extends React.Component {10
constructor(props) {11
super(props);12
this.state = { navData: NavData, flightData: FlighData };13
this.deleteFlight = this.deleteFlight.bind(this);14
}15
16
deleteFlight(id) {17
let temp = this.state.flightData;18
let index = temp.findIndex( flight => flight.id == id);19
temp.splice(index,1);20
this.setState({flightData: temp});21
console.log(id);22
}23
render() {24
return (25
<div className="App">26
<Nav navData={this.state.navData} />27
<FlightList flightData={this.state.flightData} deleteFlight={this.deleteFlight} /> 28
<Footer />29
</div>30
);31
}32
}33
34
export default App;The final state of the child component. We’ve created two additional child components.
FlightList.js
xxxxxxxxxx1
78
78
1
import React from 'react';2
3
let FlightList = (props) => {4
return (5
<div className="container">6
<div className="row mb5">7
<h1 className="text-left">Flight Schedule</h1>8
<div className="table-responsive border p-4 bg-light rounded">9
<p className="text-left font-weight-bold">Active Flight Schedule</p>10
<table className="table table-hover">11
<TableHead />12
<TableBody flightData={props.flightData} deleteFlight={props.deleteFlight}/>13
</table>14
</div>15
</div>16
17
</div>18
19
);20
}21
22
let TableHead = () => {23
return (24
<thead className="table-borderless table-secondary">25
<tr>26
<th scope="col">No.</th>27
<th scope="col">Airline</th>28
<th scope="col">Flight Number</th>29
<th scope="col">Trip Type</th>30
<th scope="col">Departure Airport</th>31
<th scope="col">Arrival Airport</th>32
<th scope="col">Departure Date</th>33
<th scope="col">Arrival Date</th>34
<th scope="col" style={{ width: '150px' }}>Actions</th>35
</tr>36
</thead>37
)38
}39
40
let TableBody = (props) => {41
return (42
<tbody>43
{props.flightData.map(flight => {44
return (45
<tr key={flight.id}>46
<td scope="row">{flight.id}</td>47
<td>{flight.airline}</td>48
<td>{flight.flight_no}</td>49
<td>{flight.trip_type}</td>50
<td>{flight.departure_airport}</td>51
<td>{flight.arrival_airport}</td>52
<td>{flight.departure_date}</td>53
<td>{flight.return_date}</td>54
<td>55
<a type="button"56
className="btn btn-success btn-just-icon btn-sm"57
href={"/edit/" + flight.id}>Edit</a>58
59
<button onClick={() => {60
props.deleteFlight(flight.id)61
}}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
);75
}76
77
78
export default FlightList;Pages: 1 2
