Forms with custom components
Hello! I'm most likely being dumb but I'm currently working on making a create form based off of what was generated by the inferencer. I've made a custom component that I'd like to be a part of the create form:
and here is it implemented in the form:
What should I do to troubleshoot this?
const AbilityScoreIncrease: React.FC<AbilityScoreIncreaseProps> = ({ control, rules, abilities }) => {
return (
<Stack direction={'row'} spacing={2}>
{abilities.map((ability) => (
<Controller
key={ability}
control={control}
name={ability}
rules={rules}
defaultValue={0}
render={({ field }) => (
<TextField
{...field}
id={`${ability}`}
type="number"
label={ability.charAt(0).toUpperCase() + ability.slice(1)}
onChange={(event) => {
field.onChange(event); // Update form state
}}
/>
)}
/>
))}
</Stack>
);
};const AbilityScoreIncrease: React.FC<AbilityScoreIncreaseProps> = ({ control, rules, abilities }) => {
return (
<Stack direction={'row'} spacing={2}>
{abilities.map((ability) => (
<Controller
key={ability}
control={control}
name={ability}
rules={rules}
defaultValue={0}
render={({ field }) => (
<TextField
{...field}
id={`${ability}`}
type="number"
label={ability.charAt(0).toUpperCase() + ability.slice(1)}
onChange={(event) => {
field.onChange(event); // Update form state
}}
/>
)}
/>
))}
</Stack>
);
};and here is it implemented in the form:
<Controller
name="modifiers.AbilityScoreIncrease"
control={control}
rules={{ required: "This field is required" }}
render={({ field }) => (
<AbilityScoreIncrease
control={control}
abilities={["strength", "dexterity", "constitution", "intelligence", "wisdom", "charisma"]}
/>
)}
/><Controller
name="modifiers.AbilityScoreIncrease"
control={control}
rules={{ required: "This field is required" }}
render={({ field }) => (
<AbilityScoreIncrease
control={control}
abilities={["strength", "dexterity", "constitution", "intelligence", "wisdom", "charisma"]}
/>
)}
/>What should I do to troubleshoot this?
