Can't seem to render <FormItem > as a children of <FieldArray />

[thomasfaller]

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 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.

[jannikbuschke]

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?