Delete event

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:

Remove icon

            <MDBBadge color="danger" className="ml-2 float-right">

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 = => !== 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:


within our component call: 

            { => (

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(}

within our badge:

            className="ml-2 float-right"
            onClick={() => this.props.onDelete(}


Passing function call via props scheme


Removing event demo

Previous lesson Download Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

Dawid Adach
For more than 5 years Dawid worked as an IT Consultant specializing in SOA/EAI/ESB in the banking domain. He gained experience working in countries like Netherlands, Belgium, Poland and India developing enterprise-class systems for the most prestigious companies. Since co-founding & in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...