Pooya Sanooei Pooya Sanooei - 1 month ago 21
Javascript Question

using antd with redux-form

I'm trying to use ant.design react components with my redux-form, so far it goes something like this:

import { Form, Input } from 'antd';
import { Field, reduxForm } from 'redux-form/immutable';
const FormItem = Form.Item;

.....

<FormItem>
<Field
component={Input}
placeholder="First Name"
name="name"
/>
</FormItem>


seems like
antd
form inputs don't support
name
attribute, they ignore and prevent to pass it down.

name
attribute is needed for redux-form to be working.

does anyone had success to get these 2 working together? thank you.

Answer Source

Generally speaking, you should not wrap redux-form Field component in the antd Form.Item component. Instead, you should create your own component:

<FormItem>
  <Input/>
</FormItem>

and pass this component into the Field.component. However, it does not sound cool, so you should consider using https://github.com/zhdmitry/redux-form-antd. This lib already have set of antd components wrapped in the Form.Item, so in your case it is just

<Field name="name" component={TextField} />