Author: Dawid Adach
Our schedule looks nice however it's still not usable. Let's add some logic.
During the last lesson we prepared a special icon with a - (minus) sign which allows us to remove a given event from the list:
<MDBBadge color="danger" className="ml-2 float-right">
-
</MDBBadge>
As you may remember, the Event component represents a single event. The list of events is currently maintained in the App component. What does it mean for us?
The delete button is a part of the Event Component, therefore we can easily call a function declared within the same component. However, the instance of Event cannot delete itself, therefore we have to pass the call from the Event Component to the App Component that will then remove the item from an array. How can we do that? We will again use props.
1. Define a function to handle deletion
Let's add a new function within the scope of the App class:
handleDelete = eventId => {
const events = this.state.events.filter(e => e.id !== eventId);
this.setState({ events });
};
As we learned before, instead of a direct update on the state variable, we create a copy of the existing array, but excluding that event with a given ID
2. Bind a child component property to a function call:
onDelete={this.handleDelete}
within our component call:
{this.state.events.map(event => (
<Event
key={event.id}
id={event.id}
time={event.time}
title={event.title}
location={event.location}
description={event.description}
onDelete={this.handleDelete}
/>
))}
3. Trigger a function call from child component:
The last thing which we have to do is to trigger function call from our child component:
onClick={() => this.props.onDelete(this.props.id)}
within our badge:
<MDBBadge
color="danger"
className="ml-2 float-right"
onClick={() => this.props.onDelete(this.props.id)}
>
-
</MDBBadge>
Overview:
Preview:
Previous lesson Download Next lesson
Spread the word:
