Reactjs + MaterialUI: SelectField event handling
<p>I am trying to build my website by mean of ReactJS and <a href="http://www.material-ui.com/#/get-started/usage" rel="nofollow">MaterialUI</a>. Specifically, I am trying to build a form with a <a href="http://www.material-ui.com/#/components/select-field" rel="nofollow"><code>SelectField</code></a>. 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 <code>value</code> of the select field.</p>

<p>The rendered select field is like this (<code>websites</code> is an array of strings):</p>

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

<p>And the function where I handle the <code>onChange</code> event is:</p>

<pre><code>  websiteDidChange(evt) {
    this.setState({
      website: evt.target.value
    });
  }
</code></pre>

<p>Unofrtunately, when I select an item, <code>evt.target.value</code> 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.</p>