title: Material UI select not showing label
body: <p>I'm having a heck of a time with Material UI's "Select" - about 10 hours into trying to get one working the way I'd like.  I'd really appreciate some help.</p>
  
  <p>This question is related to a previous one: <a href="https://stackoverflow.com/questions/51032791/select-menuitem-doesnt-show-when-jsx-saved-to-state">Select MenuItem doesn&#39;t show when JSX saved to state</a> and I suspect that if the "why" were answered on that, I might get a better idea of what's going on.</p>
  
  <p>What I'm trying to accomplish is having a Select that does the following normal things:</p>
  
  <ul>
  <li>has all the UI goodies (shows the question in the select spot, then
  moves the question smaller and out of the way after you select a
  non-null selection)</li>
  <li>upon selecting something, the label shows up (as one would expect in
  a drop down) rather than a blank (as I have been experiencing - check
  previous question)</li>
  <li>no warnings in the console about 'value' being undefined</li>
  <li>when I click away from the select after selecting something, I don't
  want the question label to move back on top of the answer like this:
  <a href="https://i.stack.imgur.com/WdSYE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WdSYE.png" alt="selected option and question label on top of each other"></a></li>
  <li>I want a 'none' option that returns the select back to it's "empty"
  form (That is to say, the question label shows at normal size in the
  select)</li>
  <li>I can set a selection to be selected by default</li>
  </ul>
  
  <p>These shouldn't be hard tasks, but I can't for the life of me get it. It' rather embarrassing.</p>
  
  <ul>
  <li>Then, upon selecting something, I want to save that selection (along
  with the other selection options) to state (so I can save it to
  localStorage so the larger form doesn't 'reset' upon page refresh)</li>
  </ul>
  
  <p>Either way, I've currently got this JSX - effectively a cut-and-paste from the material ui demos with a map for the <code>MenuItems</code>:</p>
  
  <pre><code>&lt;FormControl className={classes.formControl}&gt;
  &lt;InputLabel htmlFor={this.props.label}&gt;{this.props.label}&lt;/InputLabel&gt;
  &lt;Select
      value={this.state.selectLabel}
      onChange={this.handleSelectChange}
      inputProps={{
          name: 'selectLabel',  
          id: this.props.label,
      }}
  &gt;
  {this.props.value.map(valueLabelPair =&gt;
                  &lt;MenuItem
                      key={this.props.XMLvalue + "_" + valueLabelPair.label}
                      value={valueLabelPair.value}
                  &gt;
                      {valueLabelPair.label}
                  &lt;/MenuItem&gt;
              )}
  &lt;/Select&gt;
  &lt;/FormControl&gt;
  </code></pre>
  
  <p>the handleSelectChange looks like this -- again, exactly the same as the material UI demo.</p>
  
  <pre><code>handleSelectChange = event =&gt; {
      this.setState({ [event.target.name]: event.target.value });
  };
  </code></pre>
  
  <p>This kind of works except the console gives me the following error:</p>
  
  <blockquote>
    <p>Failed prop type: The prop <code>value</code> is marked as required in
    <code>SelectInput</code>, but its value is <code>undefined</code>.</p>
  </blockquote>
  
  <p>and the selected option and question label go on top of each other after you click away, like so: <a href="https://i.stack.imgur.com/WdSYE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WdSYE.png" alt="selected option and question label on top of each other"></a></p>
  
  <p>Further, if I try to add in this code (in the componentDidMount function) with the goal of being able to pass in the 'selected'/default option...</p>
  
  <pre><code>componentDidMount() {
      for (var i = 0; i &lt; this.props.value.length; i++) {
          if(this.props.value[i].selected) {
              // *works* console.log("selected found: " + this.props.value[i].label);
              this.setState({selectLabel:this.props.value[i].label});
          }
      }
  }
  </code></pre>
  
  <p>it does not update the give me a default answer and also gives me the following additional error in the console (in addition to all issues above):</p>
  
  <blockquote>
    <p>Warning: A component is changing an uncontrolled input of type hidden
    to be controlled. Input elements should not switch from uncontrolled
    to controlled (or vice versa). Decide between using a controlled or
    uncontrolled input element for the lifetime of the component.</p>
  </blockquote>
  
  <p>What am I missing?</p>