def destroy
@location = Location.find(params[:id])
@location.destroy
render status: :no_content
end
<button className="delete-button">DELETE LOCATION</button>
.delete-button {
background-color: red;
color: white;
}
deleteLocation = (id) => {
let filteredLocations = this.state.locations.filter(location => location.id !== id)
this.setState({
locations: filteredLocations
})
}
<LocationContainer deleteLocation={this.deleteLocation} locations={this.state.locations} />
export default function LocationContainer({locations, deleteLocation }) {
return locations.map(location => <LocationItem key={location.id} {...location} deleteLocation={deleteLocation}/>)
import React from 'react';export default function LocationItem({
id, name, baseball, basketball, football, hockey, total_teams, capital, deleteLocation}){
const handleClick = (event) => deleteLocation(id)

return (
<li className="location-item">
<h2>Location: {name}</h2>
<h4>MLB team(s): {baseball}</h4>
<h4>NBA team(s): {basketball}</h4>
<h4>NFL team(s): {football}</h4>
<h4>NHL team(s): {hockey}</h4>
<h4>Total professional teams: {total_teams}</h4>
<h4>Any teams use state capital in their title? {capital}</h4>
<button onClick={handleClick} className="delete-button">DELETE LOCATION</button>
</li>
)
}
deleteLocation = (id) => {
let filteredLocations = this.state.locations.filter(location => location.id !== id)
this.setState({
locations: filteredLocations,
})
fetch(locationsURL + "/" + id, {method: "DELETE"})
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store