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
Code:

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

Passing function call via props scheme

Preview:

Removing event demo

Rate this lesson

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 mdbootstrap.com & brandflow.net in 2016 he has been using and teaching technologies such as Angular, TypeScript, PHP, AJAX, Mongo, SQL, Hadoop Stack, Virtualization, Automation and many others...