Open muhajirdev opened 3 weeks ago
Originally I was trying to work with ArrayFields
, trying to insert. But found out that the library doesn't work well with react.
I think there should be "Gotchas" documented in the docs
What exactly does not work with React? I think this is fixed. I think the problem is that your field is not controlled: https://modularforms.dev/react/guides/controlled-fields
Ahh, i see, thank you @fabian-hiller
Then I think it would be nice if it's mentioned here https://modularforms.dev/react/guides/add-fields-to-form
<FieldArray name="test">
{(fieldArray) => (
<div>
{fieldArray.items.value.map((item, index) => {
return (
<div key={item}>
<Field name={`test.${index}`}>
{(field, props) => (
<div>
<Input {...props} value={field.value.value} />
{field.error && <FieldError>{field.error}</FieldError>}
</div>
)}
</Field>
</div>
);
})}
<Button
type="button"
onClick={() => insert(profileForm, "test", { value: "aa" })}
>
Add item
</Button>
</div>
)}
</FieldArray>
This also seems to be not reactive, how do I make it reactive. It does nothing when I insert
I need a minimal StackBlitz reproduction. Feel free to use our template. There is also a field array example included: https://stackblitz.com/edit/modular-forms-react?file=src%2Froutes%2Ftodos.tsx
This
Doesn't work
But
TextInput
does. The code is from react playground https://stackblitz.com/edit/modular-forms-react-qqpshg?file=src/routes/login.tsx,src/components/TextInput.tsx