CODEWITHSUNDEEP
reactjsselect
Niranjan
Niranjan

Reputation: 2229

How to set default value for drop-down in react?

Hi I am working on React Js drop-down. I want to set default value for the drop-down when first time page is rendered. Once user is select any value from drop-down then I am storing same value in redux store and setting same value for drop-down. Below is my code.

 render() {
  const {
   allOpenStoresSearchTerms,
    } = this.props;
    return (
     <SelectWithMargin
          instanceId="storeFilter"
          onChange={this.handleChange}
          value={allOpenStoresSearchTerms.selectedOption}
          options={options}
          placeholder="Store Type"
          clearable={false}
     />
  }
}

Below is my handle event.

  handleChange(selectedOption) {
    this.props.searchParameters(
      this.state.searchValues,
      this.state.searchDbTarget,
      '',
      selectedOption
    );
    const openAllStores = {
      ...this.props.allOpenStoresSearchTerms,
      selectedOption,
    };
    this.props.setAllOpenStoresSearchTerms(openAllStores);
  }

Whenever I choose some value in dropdown, I am storing value in redux store and setting same value for drop down. Now I want to choose value when the page is loaded first time. Below are the values of drop-down.

 const options = [
  { value: 'true', label: 'Open Stores' },
  { value: 'false', label: 'All Stores' },
];

Can someone help me to set default value when the page is loaded? I am not sure where exactly we need to set default value? Any help would be appreciated. Thanks.

Upvotes: 0

Views: 2807

Answers (1)

Asaf Aviv
Asaf Aviv

Reputation: 11770

Set up the default values as initialState

const initialState = {
  allOpenStoresSearchTerms: {
    selectedOption: {
      value: 'true',
      label: 'Open Stores',
    },
  },
};

function reduer(state = initialState, action) {
  ...
}

Upvotes: 1

Related Questions