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

Question

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?

have you tried using the default value in value and adding an onChange handler to allow it to be selected? — enjoylife
– enjoylife, Commented Dec 3, 2015 at 22:54
I have tried multiple ways of managing it, each one seems to have its own undesired effect. I've tried a combination of defaultVaule and value onChange up to and including trying all three at once with variant changes to see if one would work. As for what I am waiting on is the element exists on the DOM and based on interaction, or data generated up to that point I could possibly be waiting for an API response to populate the field with for the other selections at hand. I only know by that time what I want as a default — chris
– chris, Commented Dec 3, 2015 at 23:11

kwtangerine · Accepted Answer · 2015-12-04 01:39:22Z

3

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>
    );
}

answered Dec 4, 2015 at 1:39

kwtangerine

612 bronze badges

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

1 Comment

kwtangerine Over a year ago

Any feedback @chris?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related