I am facing an issue with my Button that triggers a MUI Dialog to open.
Within the Dialog, there is a MUI Stepper as part of my form which has different required and non-required inputs.
//Sample Input
<Controller
name="stateName"
control={control}
rules={{ required: true }}
render={({ field: { onChange, value } }) => (
<TextField
required
label="stateName"
variant="standard"
onChange={onChange}
value={value}
fullWidth
error={errors.stateName ? true : false}
helperText={errors.stateName ? "Required field" : null}
/>
)}
/>
For the entire example, refer to: https://codesandbox.io/s/gracious-tdd-dkzoqy
After submitting the form, I want to add the data to a list and display it with an edit button.
Upon clicking the edit button, I aim to populate the dialog's inputs with the edited data values.
I have tried using react-hook-form
setValue("field", value)I also attempted passing the edit object through Props to nested form steps and using
setValue within these components' useEffect utilizing useFormContext() but encountered issues.
How can I effectively pass the values to the inputs for correct display in the Multi-Step-Form-Dialog?