'Reset values in react hook forms with fields loaded in map
So i have a form that has dropdowns for companies and as many companies they are i want the values to be loaded in there. I know how to do it if its not in a map.
customerCompanyList.map(cList => {
return (
<Controller
name={`customerCompany-${cList.id}`}
control={control}
render={({ field }) => (
<FormControl
variant="outlined"
className="mt-16"
>
<InputLabel id="customerCompany-type-label">
Customer Company
</InputLabel>
<Select
labelId="customerCompany-type-label"
id="customerCompany"
label="Customer Company"
{...field}
fullWidth
>
<MenuItem value="">
<em>None</em>
</MenuItem>
{companyList.map(item => {
return (
<MenuItem key={item.id} value={item.id}>
{item.name}
</MenuItem>
);
})}
</Select>
{errors?.type?.customerCompany && (
<FormHelperText>
{errors.type.customerCompany}
</FormHelperText>
)}
</FormControl>
)}
/>
);
})
What im stuck is how do i reset the values
im using useEffect to reset the values for the ones that are not in a map. but this one i cant figure out
reset({
isCustomer: customerCompanies.length > 0,
isResource: resourceCompanies.length > 0,
isStaff: roles.length > 0,
staffRoles: roles.length > 0 ? roles : null
});
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
