Developing Functionality for Deleting a Subscriber

Let's add one more functionality to the app, which will delete a subscriber's details from the Phone Directory.

To summarise, first you wrote a deleteSubscriberHandler()  method inside the PhoneDirectory smart component. This method checks for each subscriber in the list of all subscribers inside its state and deletes the one whose id matches the id received in the function parameter. The deletion is done using the splice method in JavaScript. After deleting the required subscriber, the state is again set to the updated list. After defining this method, you passed it to the ShowSubscribers  dumb component as props.

The delete  button inside this dumb component calls a local event handler and passes the id of the subscriber to be deleted to this handler. This method, in turn, calls back the deleteSubscriberHandler() method in the PhoneDirectory component while passing to it the received id of the subscriber to be deleted.

PhoneDirectory  smart component gets back the control and deletes the subscriber whose id has been passed in the argument.

Indeed, you’ve done an awesome job!

At this stage, commit your code with “Added Delete Subscriber” as the commit message. You can look at the code diff here.