Settings button in the upper right corner of the page. adding a new component of that type to the exported component. Render the component at the end of the content and pass it new data. This will act as your profile settings button. Copy If your development server is already running this will cause your home page to throw an error The component now requires profile data. Use the function written in Part 2 of this series in this file. Use this function to load the logged in user's data inside the function. This data is then provided to the component. Copy you now have access to the data you need. If you were previously getting an error due to missing this data then refreshing the page in your browser should show in the top right corner of the page that the profile button has rendered successfully. Create a modal target to open the profile settings modal when the profile settings button is clicked. Similar to the modal built in the previous part of this series.
You need to set up a nested route in which to re photo editing servies nder the new modal. Add a new file named with the following content to start it Copy the above snippet to render modally into a new component. Retrieve and return the logged in user's data in the function. Use hooks to access data returned from functions. To turn on this new mode add a handler to the component that uses a hook to navigate the user to the subroute. Copy If you now click on the Profile Settings button you should see the new mode appear on the screen. Building the form The form you will build will contain three fields that allow users to modify their profile details first name last name and department. Start building the form by adding first and last name inputs Copy Here is an overview of what was added above Added the imports required in the changes made. A state object is created that holds the form values. This will default the values to the logged in user's existing profile data.
Created a function that accepts event and field names as parameters. These are used to update state when the value of an input field changes in the component. Renders the basic layout of the form along with the two input fields. At this point there is no error handling and the form does nothing. Before adding these sections you need to add the department dropdown list. Add a new constant to hold the possible options defined in the schema. Add the following exports to the file Copy Import into your file along with the components and use them to add new inputs to your form Copy At this point your form should render the correct inputs and their options. It will default to setting their values to the current values associated with the logged in user's profile. Allowing users to submit a form The next part you'll build is the function that makes the form work.
發表於 2023-12-31 16:23:01
