Set <select> default value with redux-form in React

Question

This is above my paygrade. I was trying to put a dropdown list in redux-form and have it initialize with a default value like its done for <input>.

The custom drop down component is setup as follows:

const renderDropDownField = ({ input, label, values, defaultValue }) => (
  <Container>
    <Row>
      <Col sm="6">
        <label className="input-label">{label}</label>
      </Col>
      <Col sm="6">
        <Row>
          <select className="dropdown-list" {...input} >
            {values.map((value, index) => (
              <option key={value} value={value}>{value}</option>
            ))}
          </select>
        </Row>
      </Col>
    </Row>
  </Container>

Then the field in the form

  <Field
    name="shuffle"
    component={renderDropDownField}
    label="SHUFFLE [ YES/NO ]:"
    values={props.list.shuffle.values}         // from parent
    defaultValue={props.list.shuffle.default}  // from parent
  />

The defaultValue prop in the field is extra because the initial values come from the defaultValues from mapStateToprops

const mapStateToProps = (state, props) => ({
  enableReinitialize: false,
  keepDirtyOnReinitialize: true,
  initialValues: props.defaultValues
})

I have tried every permutation of setting the value, defaultValue, and selected attribute in the <select> or <option> tag with no luck.

How can we set the initial value, or the default value in a drop down list?

The actual form value is set correctly but the option is not set in the gui.

EDIT

Just to clarify for anyone else looking at this thread in the future. The defaultValue prop is not necessary at all in the renderDropDownField function. Nor do you have to specify an attribute defaultValue in the <select> or <option>.

Say in the { initialValues: props.defaultValues } one is passing all the default values for all fields including the default value for our <select> component. Example:

this.state = {
  defaultValues: {
    shuffle: "No"
  }
};

and the options for the list like so

this.dropdownListOptions = {
    shuffle: {
      values: ["Yes","No"]
    }
  };

Then the redux-form will automatically load the default value in the form and gui as long as the default value i.e.: in the state matches one of the values in the option list. This was my problem. I had a value in the state which was different than all values in the option. The answer below help me troubleshoot it.

Solution 1

Have you tried passing defaultValue prop to select?

const renderDropDownField = ({ input, label, values, defaultValue }) => (
  <Container>
    <Row>
      <Col sm="6">
        <label className="input-label">{label}</label>
      </Col>
      <Col sm="6">
        <Row>
          <select defaultValue={defaultValue} className="dropdown-list" {...input} >
            {values.map((value, index) => (
              <option key={value} value={value}>{value}</option>
            ))}
          </select>
        </Row>
      </Col>
    </Row>
  </Container>

Solution 2

The easiest way is to use the JSX attribute defaultValue={...}

<Row className="form-group">
    <Label htmlFor="rating" xs={12}>Rating</Label>
    <Col xs={12}>
        <Control.select model=".rating" name="rating" id="rating"className="form-control" 

            **defaultValue={1}**              >

              <option>1</option>
              <option>2</option>
              <option>3</option>
              <option>4</option>
              <option>5</option>
        </Control.select>
    </Col>
</Row>

Comments

[Puneet Mahendra]

Can you check if you're actually getting the defaultValue in renderDropDownComponent

[Edv Beq]

I have added a console.log statement and its coming in fine.

[Puneet Mahendra]

The defaultValue has nothing to do with redux-form. You can see a sample code here using only react. repl.it/repls/EmbellishedOrangeredDecimals

[Edv Beq]

Your solution works. The value passed through props.default values did not match any of the list options.