How to use Redux-Form with React-Bootstrap?

Question

I am trying to use \"redux-form\": \"^6.7.0\" with \"react-bootstrap\": \"^0.31.0\"

My Component renders nicely, but when I press Submit, what I see is an empty object.<

Answer 1

Some props required by <FormControl> are passed inside props.input from <Field>, see http://redux-form.com/6.6.3/docs/api/Field.md/#props

To pass all those props in a generic way, instead of doing it explicitly, you can use the following function:

const ReduxFormControl = ({input, meta, ...props}) => {
     return <FormControl {...props} {...input} />
};

and then inside the form:

<Field component={ReduxFormControl} ... />

This way, value, onChange, etc. are all passed as expected to <FormControl>.

Answer 2

See: https://github.com/erikras/redux-form/issues/2917

Oh, this was a great mystery. I followed the advice in https://github.com/react-bootstrap/react-bootstrap/issues/2210 and both the warning about additional props and the empty submit stopped.

It seems you have to wrap the Bootstrap in your custom component (why?, I don't know). Also make sure you custom component is a stateless funcitonal component, or after the first key press, you field will blur and lose focus.

There are some warnings in the documentation of redux-form about this.

my custom field component FieldInput

  const FieldInput = ({ input, meta, type, placeholder, min, max }) => {
        return (
            <FormControl
                type={type}
                placeholder={placeholder}
                min={min}
                max={max}
                value={input.value}
                onChange={input.onChange} />
        )
    }

and I invoke it like this:

<Field name="ServerPort"
   type='number' 
   component={FieldInput} 
   placeholder={ServerPort} 
   min="1024" max="65535" 
/>

see also: https://github.com/erikras/redux-form/issues/1750

So now, the definition of FieldInput and Config look like this:

import React, { Component } from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import { Form, FormControl, FormGroup, ControlLabel, Col, Button, Tooltip, OverlayTrigger } from 'react-bootstrap'
import * as Act from '../dash/actions.js'
import FaFolderOpen from 'react-icons/lib/fa/folder-open'
import FaFileCodeO from 'react-icons/lib/fa/file-code-o'

const FieldInput = ({ input, meta, type, placeholder, min, max }) => {
    return (
        <FormControl
            type={type}
            placeholder={placeholder}
            min={min}
            max={max}
            value={input.value}
            onChange={input.onChange} />
    )
}

const Config = ({ ServerPort, UserID, PortNumber, WWWUrl, SourcePath, FMEPath, pickFile, pickFolder, handleSubmit }) => {
    return (
        <Form horizontal onSubmit={handleSubmit}>
            <FormGroup controlId="serverPortBox">
                <Col componentClass={ControlLabel} sm={2}>Watson Port:</Col>
                <Col sm={10}>
                    <OverlayTrigger placement="left" overlay={(<Tooltip id="tt1">TCP port for Watson to use</Tooltip>)}>
                        <Field name="ServerPort" type='number' min="1024" max="65535" component={FieldInput} placeholder={ServerPort}  />
                    </OverlayTrigger>
                </Col>
            </FormGroup>