ReactJS select Initial value not reflected in view - html

Question

I am trying to set an initial value for a select, but not showing in the view.
My jsx:
var SelectOKNO = React.createClass({
render() {
return (
<div>
<select className="selectpicker" value={this.props.value}
onChange={this.props.onChange.bind(this)}>
<option value=""></option>
<option value="OK">OK</option>
<option value="NO">NO</option>
</select>
</div>
)
}
});
var Detalle = React.createClass({
getInitialState: function() {
return({
ID:'',
UREFValue: '',
URCorrectoValue: '',
ConcordanciaValue: '',
PruebasValue: '',
EmergenciasValue: '',
ComentarioValue: '',
EstadoValue:'',
rec_fecha_aprobacion:'',
rec_aplica_control: '',
rec_auditor: ''
});
},
handleChange: function (key) {
return function (e) {
var state = {};
state[key] = e.target.value;
this.setState(state);
}.bind(this);
},
componentDidMount: function() {
$.ajax({
url: 'url',
data: { //Passing data
id: $("#hdnID").val()
},
dataType: 'json',
cache: false,
success: function(data) {
this.setState({
ID:data.rec_id,
UREFValue:data.rec_inconveniente_usuario_ref,
URCorrectoValue:data.rec_usuario_ref_correcto,
ConcordanciaValue:data.rec_concordancia_doc,
PruebasValue:data.rec_pruebas,
EmergenciasValue:data.rec_emergencia,
ComentarioValue:data.rec_comentario,
EstadoValue: data.rec_estado,
rec_fecha_aprobacion:data.rec_fecha_aprobacion,
rec_aplica_control: data.rec_aplica_control,
rec_auditor: data.rec_auditor
});
}.bind(this),
error: function(xhr, status, err) {
}.bind(this)
});
},
render() {
return (
<form onSubmit={this.handleSubmit}>
<br/>
<table className="table borderless">
<tr className ="row">
<td>Usuario Referente:
<SelectOKNO value={this.state.UREFValue} onChange={this.handleChange('UREFValue').bind(this)}/>
</td>
<td>UR Correcto:
<textarea rows="3" className="form-control noresize" value={this.state.URCorrectoValue} onChange={this.handleChange('URCorrectoValue')} />
</td>
</tr>
<tr className ="row">
<td>Concordancia:
<SelectOKNO value={this.state.ConcordanciaValue} onChange={this.handleChange('ConcordanciaValue')}/>
</td>
<td>Pruebas:
<SelectOKNO value={this.state.PruebasValue} onChange={this.handleChange('PruebasValue')}/>
</td>
</tr>
<tr className ="row">
<td>Emergencias:
<SelectOKNO value={this.state.EmergenciasValue} onChange={this.handleChange('EmergenciasValue').bind(this)}/>
</td>
<td>Comentario:
<textarea rows="3" className="form-control noresize" value={this.state.ComentarioValue} onChange={this.handleChange('ComentarioValue')} />
</td>
</tr>
<tr className ="row">
<td>
<select className="selectpicker" value={this.state.EstadoValue}
onChange={this.handleChange('EstadoValue')}>
<option value="Abierto">Abierto</option>
<option value="EN_PROCESO">En Proceso</option>
<option value="CON_INCONVENIENTES">Con Inconvenientes</option>
<option value="COMPLETO">Completo</option>
</select>
</td>
<td>
<button type="submit" className="btn btn-default">Guardar</button>
</td>
</tr>
</table>
</form>
)
}
});
When page loads, all the select shows value like ''.
But in debug view of chrome I can see the value

Answer 1

How to set selected on options elements. Also, check what that means in React.
Finally, some nice libraries:
react-select and
react-bootstrap