How to use a redux form width "Field" with Bootstrap

Question

I have this component in my form :

  <Field className={styles.formcontrol}
    component='input'
    name={name}
    type={type}
  />

This is a field from redux-form.

However, I have to use the bootstrap for this form. And Bootstrap input looks like this :

<FormGroup controlId='login'>
    <FormControl name='email' placeholder='Login' />
</FormGroup>

How can I apply Bootstrap style (the FormGroup component) but still use a "Field" from redux-form ?

Answer 1

You can use a stateless function which will include your Bootstrap component.

// The props will be passed by redux-form.
const MyCustomComponent = ({input}: props) => (
    <FormGroup controlId='login'>
        <FormControl name='email' placeholder='Login' value={input.value} onChange={input.onChange} {...props}/>
    </FormGroup>
)

and use it with Field as

<Field 
    className={styles.formcontrol}
    component={MyCustomComponent}
    name={name}
    type={type}
/>

Here is the nice article explaining stateless components in React.