React Insights: a simple ‘Blogs Application’ from Scratch (Part-7)

How to perform delete action in React?

Links to every other section of this series>

Part 1: React Environment setup ||| Part 2: How to list Data on webpage with React ||| Part 3: How to fetch data using React ||| Part 4: How to use Routing capabilities in React ||| Part 5: How to use useParams hook to load page based on URL ||| Part 6: How to use form fields on React application ||| Part7: How to perform delete action in React

To delete a blog, once again, we trigger the fetch function, this time utilizing the DELETE method. Additionally, we need to provide the id of the blog we wish to delete from the database.

Let’s add the delete functionality in blog detail page.

Let’s also add the functionality to reroute to home page, once the delete is successfully completed

Currenty the application shows as follows:

Let’s load the details for the last item in the list

Clicking on the Delete button will delete & the state will be updated. Which in turn will make the DELETE call to server along with the blog id. As a result the db file will be updated, & the blog will be removed.

What next?

Stay committed, continue your dedication to learning and consistently honing your skills.

Conclusion

In conclusion, this marks the end of the entire series. I hope it has been helpful and demonstrated how various aspects of React development come together to create an application. While this has been a simple example, real-world applications will be more complex and encompass many other essential aspects.

Nevertheless, I trust that this will serve as a starting point, boosting confidence, and aiding in the learning process.