Editing User Information

Follow step-by-step instructions to implement the UI for editing the user information.

Now that we have the profile page ready, we can create the page that will contain the form to edit user information.


The “Edit” button on the “Profile” page should redirect the user to a page with a form to update its information. In this lesson, we'll modify the useUserActions Hook by adding a new method to edit user information via the API. Then, we will create the form to edit user information. Lastly, we will integrate the editing form component on the EditUser page.

Let’s start by adding a new method to the useUserActions Hook.

Adding the edit method to useUserActions

In the src/hooks/user.actions.js file, we'll add another method to the useUserActions Hook. This function will handle the patch request to the API. Because we are saving a user object in localStorage, we will update the value of the object if the request succeeds:

Get hands-on with 1200+ tech skills courses.