Search icon CANCEL
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Full Stack Development with Spring Boot and React

You're reading from   Full Stack Development with Spring Boot and React Build modern and scalable web applications using the power of Java and React

Arrow left icon
Product type Paperback
Published in Apr 2022
Publisher Packt
ISBN-13 9781801816786
Length 378 pages
Edition 3rd Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Juha Hinkula Juha Hinkula
Author Profile Icon Juha Hinkula
Juha Hinkula
Arrow right icon
View More author details
Toc

Table of Contents (22) Chapters Close

Preface 1. Part 1: Backend Programming with Spring Boot
2. Chapter 1: Setting Up the Environment and Tools – Backend FREE CHAPTER 3. Chapter 2: Understanding Dependency Injection 4. Chapter 3: Using JPA to Create and Access a Database 5. Chapter 4: Creating a RESTful Web Service with Spring Boot 6. Chapter 5: Securing and Testing Your Backend 7. Part 2: Frontend Programming with React
8. Chapter 6: Setting Up the Environment and Tools – Frontend 9. Chapter 7: Getting Started with React 10. Chapter 8: Consuming the REST API with React 11. Chapter 9: Useful Third-Party Components for React 12. Part 3: Full Stack Development
13. Chapter 10: Setting up the Frontend for Our Spring Boot RESTful Web Service 14. Chapter 11: Adding CRUD Functionalities 15. Chapter 12: Styling the Frontend with React MUI 16. Chapter 13: Testing Your Frontend 17. Chapter 14: Securing Your Application 18. Chapter 15: Deploying Your Application 19. Chapter 16: Best Practices 20. Assessments 21. Other Books You May Enjoy

The delete functionality

Items can be deleted from the database by sending the DELETE method request to the http://localhost:8080/api/cars/{carId} endpoint. If we look at the JSON response data, we can see that each car contains a link to itself and it can be accessed from the _links.self.href node, as shown in the following screenshot. We already used the link field to set a unique ID for every row in the grid. That row ID can be used in deletion, as we can see later:

Figure 11.7 – Car link

The following steps demonstrate how to implement the delete functionality:

  1. Here, we will create a button for each row in the table. The field of the button will be _links.self.href, which is a link to a car. If you need more complex cell content, you can use a renderCell prop that you can use to define how a cell content is rendered.

Let's add a new column to the table using renderCell to render the button element. The row argument that is passed...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at €18.99/month. Cancel anytime