formik-antd
formik-antd copied to clipboard
Can't seem to render <FormItem > as a children of <FieldArray />
Hey guys,
I'm experiencing some issues using Formik alongside Ant Design. I'm using formik-antd
package to make that easier and I'm just stumbling on getting what I want from the <FieldArray />
component.
I'd like to leverage the Ant-Design components, using <FormItem>
alongside <Input>
to get proper labelling of my fields.
The problem is that I can't seem to invoke/use <FormItem> inside the FieldArray render method. To sum it up, the following works:
<Form>
<FieldArray
name="patients"
render={() => (
<div>
{props.values.patients.map((patient, i) => (
<div key={i}>
<Input name={`patients[${i}].firstName`} />
<Input name={`patients[${i}].lastName`}></Input>
<Input name={`patients[${i}].items`}></Input>
</div>
))}
</div>
)}
/>
but the following doesn't :
<Form>
<FieldArray
name="patients"
render={() => (
<div>
{props.values.patients.map((patient, i) => (
<div key={i}>
<FormItem label="first name">
<Input name={`patients[${i}].firstName`} />
</FormItem>
<Input name={`patients[${i}].lastName`}></Input>
<Input name={`patients[${i}].items`}></Input>
</div>
))}
</div>
)}
/>
When I try to implement that, I get the following error from React :tired_face:
Error: Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.
Can you use the FormItem (or Form.Item) component from formik-and and pass in the same name prop. I.e.
<FormItem label="first name" name={`patients[${i}].firstName`}>
<Input name={`patients[${i}].firstName`} />
</FormItem>
and report if this works?