Sending POST/PUT/DELETE Requests from React Forms
Explore how to use React forms to create update and delete data by sending POST PUT and DELETE requests to Express routes. Learn strategies to keep the UI state consistent with the database using server responses or refetching. Understand optimistic updates and best practices for syncing data after mutations.
We'll cover the following...
The previous lesson read data into React. This one writes it back. A real app does not just display products; it creates, edits, and removes them, and each action sends a request to the same Express routes built in the CRUD chapter. The challenge is not only sending the request but keeping the UI consistent with the database afterward, the three concerns every React developer manages when mutating server data.
Note: This React and Axios code is for read-along. It calls the create, update, and delete routes from the CRUD chapter, using the shared
api.jsinstance from the previous lesson.
To make the loop concrete, the next visual should show a mutation request and the two ways to sync state afterward.
That starts with creating data.
Creating with POST
A create form gathers input and sends it as a POST request. On success, the server returns the ...