Hi All,
I am working with Meteor and React and have the following component:
User = React.createClass({
getInitialState() {
return { selectValue: this.props.user.roles };
},
handleChange( event ) {
this.setState({ selectValue: event.target.value });
},
render() {
let message ='You selected ' + this.state.selectValue;
return (
<tr>
<td>
{this.props.user.profile.name.first}
</td>
<td>
{this.props.user.profile.name.last}
</td>
<td>
{this.props.user.emails[0].address}
</td>
<td>
<select name="userRole" value={this.state.selectvalue} onChange={this.handleChange}>
<option value="admin">Admin</option>
<option value="manager">Manager</option>
<option value="employee">Employee</option>
</select>
<p>{message}</p>
</td>
</tr>
);
}
});
The this.props.user.roles in getInitalState is a value coming from the database. The component is doing exactly what I want apart from the select option is not showing the value I want. This is what is rendered out on screen:
My question is how would I add a selected=“selected” to the option so it represents the correct role?
Many thanks in advance.