title: Reactjs + MaterialUI: SelectField event handling
body: <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>