React - Pass child dropdown menu state to parent - reactjs

Question

I am trying to set up a page that uses React. The page has a dropdown menu component, which should trigger an update of state in the parent. I have tried following several examples but cannot get anything to work. Here is a simplified example for both methods I've tried:
Pass a callback as a prop to the child which updates the parent state:
let Example = React.createClass({
getInitialState() {
test: "fail"
},
_updateOnChange(value) {
this.setState({test: value})
},
render() {
return (<div><DropDown onValueChange=this._updateOnChange} />
<p>{this.state.test}</p></div>);
}
});
let DropDown = React.createClass({
getInitialState() {
return { value: "fail" };
},
_onChangeHandler(e) {
this.setState({value: e.target.value});
this.props.onValueChange(this.state.value);
},
render() {
return (
<select onChange={this._onChangeHandler} value={this.state.value}>
<option value="1">1</option>
<option value="2">2</option>
</select>
);
}
});
This always displays "fail" rather than "1" or "2".
Have the parent grab the value of the dropdown menu using onChange instead of a callback.
let Example = React.createClass({
getInitialState() {
test: "fail"
},
_updateOnChange(e) {
this.setState({test: e.target.value})
},
render() {
return (<DropDown onChange=this._updateOnChange} />);
}
});
let DropDown = React.createClass({
getInitialState() {
return { value: "fail" };
},
_onChangeHandler(e) {
this.setState({value: e.target.value});
},
render() {
return (
<select onChange={this._onChangeHandler} value={this.state.value}>
<option value="1">1</option>
<option value="2">2</option>
</select>
);
}
});
I can see the state change within the DropDown component if I try to render the state, but the parent does not change. What am I doing wrong?

Answer 1

Your first approach should work just fine with couple of changes
The method getInitialState should return an object like this
getInitialState() {
return { test: "fail" }
}
The _onChangeHandler in the DropDown component has a problem. You have two ways to solve this
Option 1
The second line this.props.onValueChange(this.state.value); will not execute after the state has been set and hence it will display old values. setstate definition looks like this
setState(function|object nextState[, function callback])
use the callback function to make sure that the state has been set and then this.prop executes
_onChangeHandler(e) {
var self = this;
this.setState({value: e.target.value}, function(){
self.props.onValueChange(self.state.value); // <---- Makes sure that the state has been set at this stage
});
},
Option 2
instead of passing this.state.value just send e.target.value like this
_onChangeHandler(e) {
this.setState({value: e.target.value});
this.props.onValueChange(e.target.value); // <--- pass the value directly
},
Here is a demo https://jsfiddle.net/dhirajbodicherla/aqqcg1sa/4/