how to get react-bootstrap select to work with redux forms?

Question

I am building a form using redux forms and i'm using react-bootstrap for ui framework. But i can't get redux forms to work with react-bootstrap select component. The select field is displayed, but the options are not rendered and they are not visible. Any help would be appreciated.

This is what i have so far:

form.js:

render() {
<Form horizontal onSubmit={handleSubmit}>
  <Field component={SelectField} label='Gender' name='gender'>
            <option value='male'>Male</option>
            <option value='female'>Female</option>
    </Field>
</Form>
}

selectField.js:

props => {
   return (
    <FormGroup>
        <Col componentClass={ControlLabel} sm={2}>
            {props.label}
        </Col>
        <Col sm={4}>
            <FormControl componentClass='select' placeholder='select' 
                {...props.input}>
            </FormControl>
        </Col>
    </FormGroup>
  );
 }

tryonlinux tryonlinux · Accepted Answer · 2019-04-12T20:41:19

This is how I was able to get select to work with field and react-bootsrap. With this code you can then just pass whatever array of values as a prop on the Field control and it will get passed to renderSelect and it will create an option for each of the values.

Inside your Component File (or have it gathered from a web service or whatever):

const colors = ['Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Indigo', 'Violet']; //i.e. options

Inside your Component:

  <form onSubmit={handleSubmit}>
        <Form.Group controlId="fromColors">
          <Form.Label>Colors</Form.Label>
          <Field
            type="select"
            placeholder="Select Colors"
            label="colors"
            name="colors"
            options={colors}
            component={renderSelect}
          />
        </Form.Group>
</form>

Then inside a renderField.js file that you can import into your component you could do something like:

const renderSelect = ({
  input,
  options,
  label,
  type,
  meta: { touched, error }
}) => (
  <div>
    <FormControl {...input} as="select">
      <option value="">Select a color...</option>
      {options.map(val => (
        <option value={val} key={val}>
          {val}
        </option>
      ))}
    </FormControl>
    {touched && error && <span>{error}</span>}
  </div>
);
export {renderSelect };

how to get react-bootstrap select to work with redux forms?

1 Answers