React select="selected"


#1

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.