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 ponent 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"
    ponent={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 e 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> ponent. 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.

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 ponent 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"
    ponent={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 e 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> ponent. 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.

• javascript
• reactjs
• redux-form

• initialValues might help here: redux-form./7.4.2/examples/initializefromstate – Chris Cousins Commented Aug 25, 2018 at 3:38

2 Answers 2

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>

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>