In this post, we are going to code a business logic for the DeleteOwner component to delete an entity from the server. After we implement this component, we’ll complete this series and have all the CRUD operations.

Without further ado, let’s get into it.

For the complete navigation and all the basic instructions of the React series, check out: Introduction to the React series.

For the previous part check out: Handling Update Request in React

The source code is available at GitHub: React series – react-series-part9-end branch

This post is divided into several sections:

Preparations for the Delete Owner Component and the Delete Route

Inside the Owner folder, let’s create a new one and name it DeleteOwner. Inside we are going to create a new file DeleteOwner.js:

Delete Request in React folder structure

Now let’s modify the DeleteOwner.js file with basic setup code:

To enable navigation to this component, we need to modify the App.js file:

Right now if we click on the Delete button in the OwnerList component, we will navigate to the DeleteOwner page (even though it has no content inside).

Connecting Our Component with the Reducer

First of all, we need to add the import statements:

The next thing we need to do is to add the mapStateToProps function right below the class:

And then, add the mapDispatchToProps function:

So, all of this code is quite familiar (if you had read previous parts).

Finally, let’s modify the export statement:

Implementing JSX in the DeleteOwner Component

To create our view for this component, we need to add the import statements first:

Right between the render and return blocks, we need to add this code:

Inside the Aux tag, let’s add a content that we are going to display on the page:

Below the Row tag we need to display the buttons on the page:

Finally, let’s add the import statements for the modal components:

Right after that, below the Row tag and right above the Aux tag, let’s add the code for displaying our modal components:

Now, we can inspect the result:

Result picture

As we can see from the picture above, we don’t have all the data on the page, but we are about to fix that shortly.

Implementing the Business Logic for the Delete Action

To fetch the owner object from the server we are going to add the componentDidMount function right above the render function:

Now if we navigate to the OwnerDelete component, we are going to see the page with the correct data:

In order for the Cancel button to work, let’s add this function:

Finally, let’s implement the delete action:

Great job.

We can check the result:

Delete action

If we click on the OK button, we are going to be directed to the OwnerList component.

Conclusion

Finally, we have finished our journey for this React project. We hope you have enjoyed as much as we did.

Thank you for reading the article and I hope you found something useful in it.

If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published Web Development content we encourage you to subscribe to our blog.