Q:

Reactjs + MaterialUI: SelectField event handling

I am trying to build my website by mean of ReactJS and MaterialUI. Specifically, I am trying to build a form with a SelectField. It looked very easy, but then I got stuck as I tried to make it a controlled component. I just would like that whenever the user selects an item in the drop down list, that item becomes the value of the select field.
The rendered select field is like this (websites is an array of strings):
<SelectField floatingLabelText="Website" onChange={(evt) => this.websiteDidChange(evt)} value={this.state.website} >
            {websites.map(function(w, index){
              return  <MenuItem key={index} label={w} value={w}>{w}</MenuItem>;
            })}
</SelectField>

And the function where I handle the onChange event is:
  websiteDidChange(evt) {
    this.setState({
      website: evt.target.value
    });
  }

Unofrtunately, when I select an item, evt.target.value results undefined. Can anyone see what am I missing? Should I use another property from the event? I couldn't really figure it out from the documentation.

A:

I found the answer myself: apperently the onChange callback receives two arguments: the event and the newly selected index. So I updated the code like below and it works:
websiteDidChange(newIndex) {
  this.setState({
    website: websites[newIndex]
  });
}

...

<SelectField floatingLabelText="Website" onChange={(evt, newIndex) => this.websiteDidChange(newIndex)} value={this.state.website} >
            {websites.map(function(w, index){
              return  <MenuItem key={index} label={w} value={w}>{w}</MenuItem>;
            })}
</SelectField>

