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.

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

Puneet · Accepted Answer · 2018-08-25 09:39:18Z

3

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>

edited Aug 25, 2018 at 9:39

answered Aug 25, 2018 at 6:41

Puneet

6541 gold badge8 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Puneet Over a year ago

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

Edv Beq Over a year ago

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

Puneet Over a year ago

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 Over a year ago

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

Anis · Accepted Answer · 2020-09-21 23:06:07Z

1

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>

answered Sep 21, 2020 at 23:06

Anis

752 silver badges7 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related