CODEWITHSUNDEEP
javascripthtmldomreactjs
chris
chris

Reputation: 36937

Change Select (drop down) selection on state change within react component

I have a dropdown I want to be pre-selected when the data is available. However there appears to be no real chance for that?

Since I am waiting for a change in state for a particular value using that value as the value= causes the selections to be unselectable, while using it as a defaultValue= causes the UI to not recognize the value unless a change to the element has been made meaning if the user decides to go with the default choice it wouldn't be passed up the to the API I am trying to pass it up to.

Is there a way to dynamically change a select box after the dom is ready after the components mounted and when a state is changed?

Upvotes: 1

Views: 3801

Answers (1)

kwtangerine
kwtangerine

Reputation: 61

It's a bit difficult without seeing the code, but have you tried setting the value into the React component's state and rendering that instead? You can also read the state's value instead of the DropDown's.

getInitialState: function () {
        return {
          dropDownSelection: "some default value"
        };
      },

handleSelectionChanged: function (e) {
    this.setState({
      dropDownSelection: e.target.value
    });
  },

render: function () {
    return (
    //...
    <select className="form-control" value={this.state.dropDownSelection} onChange={this.handleSelectionChanged}>
    //...
    </select>
    );
}

Upvotes: 3

Related Questions