Completing the Custom Form Field: Outputting the Result
Essential knowledge
Authors:
Cameron Johns, Cille Schliebitz, Anita Gu
Changed on:
3 Feb 2025
Overview
This lesson completes the custom form field component by implementing the crucial step of outputting the captured data to the form's submitted payload. We'll learn how to use the
`onChange``FormFieldProps``locationRef``quantity`Key points
- Outputting Data: Custom form fields must output their captured data to be included in the form's submitted payload.
- Event: The onChange event of FormFieldProps is used to pass the data back to the form.
`onChange` - : The output data is structured according to the StockReservationPayload interface, containing
`StockReservationPayload`and`locationRef`.`quantity` - Conditional Call: The
`onChange`event is called only when a valid location is selected.`onChange` - Verification: The lesson demonstrates how to use browser developer tools (Network tab) to inspect the posted event data and verify that the custom field's output is correctly included in the attribute.
`reservationDetails`
In this lesson, you will complete the custom form field component by producing the result from the field back to the form, which will be posted when you submit it.
A form field must produce a result to be added to the post-payload of a form submit action.
Refer to the video below to complete the following steps:
- First, you must update the hook and call the
`useEffect`event defined on the`onChange`component.`FormFieldProps` - Since we typed the to use the
`FormFieldProps`interface, this expects a`StockReservationPayload`and a`locationRef`as part of the complex object value.`quantity` - Additionally, should only be called if a valid value is selected for the location state variable.
`onChange` - Since this is a form for a User Action, you can view the event posted to the transition API in the Network tab of your browser developer tools.
- Finally, locate the event attribute to see the result.
`reservationDetails`
Producing a Custom Value
This video explains how to reuse the result from the field back in the form
