Why is my delete function resulting in an undefined value error? - node.js

Question

I'm building app using ReactJs and NodeJs. App is displaying data from database or all rooms. Room have to be abled to be created, edited and deleted.
Create and edit is working. The delete function is not.
Here is code:
Rooms.js
export default class RoomsAdmin extends React.Component {
constructor(props) {
super(props);
this.state = { rooms: [] };
this.delete = this.delete.bind(this);
}
componentDidMount() {
axios.get('http://localhost:3090/admin/')
.then(response => {
this.setState({ rooms: response.data });
})
.catch(function (error){
console.log(error);
})
}
componentDidUpdate() {
axios.get('http://localhost:3090/admin/')
.then(response => {
this.setState({ rooms: response.data });
})
.catch(function (error){
console.log(error);
})
}
delete() {
axios.get('http://localhost:3090/admin/delete/'+this.props.room._id)
.then(console.log('Deleted'))
.catch(err => console.log(err))
}
roomList() {
const Room = props => (
<div className="col-md-4">
<div className="card mb-4 shadow-sm">
<div className="card-body">
<h5 class="card-title">{props.room.title}</h5>
<p className="card-text">{props.room.description}</p>
<div className="d-flex justify-content-between align-items-center">
<div className="btn-group">
<Link className="btn btn-sm btn-outline-secondary"
to={ "/edit/"+props.room._id}>Edit</Link>
<button onClick={this.delete}>Delete</button>
</div>
</div>
</div>
</div>
</div>
)
return this.state.rooms.map(function (currentRoom, i) {
return <Room room={currentRoom} key={i} />
});
}
render() {
return (
<div>
<Header />
<div>
<div className="album py-5 bg-light">
<div className="container">
<div className="row">
{this.roomList()}
</div>
</div>
</div>
</div>
</div>
)
}
}
After clicking on delete I get this error:
Uncaught TypeError: Cannot read property '_id' of undefined
Any tip would be highly appreciated.

Answer 1

You are confusing a parent -> child relationship here. There is only one component, so you don't have props.room. Instead just pass the room id to be deleted in the callback function.
<button onClick={this.delete.bind(null, props.room._id}>Delete</button>
and your handler function
delete(id) {
I would rename your handler to be a little more explicit, also delete is a keyword in javascript so probably best to avoid that function name.
deleteRoom(id) {
axios.get(`http://localhost:3090/admin/delete/${id}`)
.then(console.log('Deleted'))
.catch(err => console.log(err))
Edit, I cleaned up the code a little, moved the child component outside of the parent so you dont need to reinitialize that component each time you render.
export default class RoomsAdmin extends React.Component {
constructor(props) {
super(props)
this.state = { rooms: [] }
this.deleteRoom = this.deleteRoom.bind(this)
}
componentDidMount() {
axios.get('http://localhost:3090/admin/')
.then(response => {
this.setState({ rooms: response.data })
})
.catch((error) => {
console.log(error)
})
}
componentDidUpdate() {
axios.get('http://localhost:3090/admin/')
.then(response => {
this.setState({ rooms: response.data })
})
.catch((error) => {
console.log(error)
})
}
deleteRoom(id) {
axios.get(`http://localhost:3090/admin/delete/${id}`)
.then(console.log('Deleted'))
.catch(err => console.log(err))
}
roomList() {
return this.state.rooms.map((currentRoom, i) => (
<Room
room={currentRoom}
onDelete={this.deleteRoom.bind(null, currentRoom._id)}
key={i}
/>
))
}
render() {
return (
<div>
<Header />
<div>
<div className="album py-5 bg-light">
<div className="container">
<div className="row">{this.roomList()}</div>
</div>
</div>
</div>
</div>
)
}
}
const Room = props => (
<div className="col-md-4">
<div className="card mb-4 shadow-sm">
<div className="card-body">
<h5 class="card-title">{props.room.title}</h5>
<p className="card-text">{props.room.description}</p>
<div className="d-flex justify-content-between align-items-center">
<div className="btn-group">
<Link
className="btn btn-sm btn-outline-secondary"
to={`/edit/${props.room._id}`}
>
Edit
</Link>
<button onClick={props.onDelete}>Delete</button>
</div>
</div>
</div>
</div>
</div>
)