title: Material Design React Multiple Select Placeholder
body: <p>I'm trying to make my React component behave like the example for Placeholder in Multiple Select <a href="https://material-ui.com/components/selects/#multiple-select" rel="nofollow noreferrer">here</a>.</p>
  
  <p>However, after many variations of the code, I can't seem to put the placeholder value there as the default value like in their code.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>const units = [
      'box',
      'pieces',
      'ounces'
  ];
  
  export default function MultipleSelect() {
    const [values, setValues] = React.useState({
      units: ''
    });
  
    const handleChange = name =&gt; event =&gt; {
      setValues({ ...values, [name]: event.target.value });
    };
  
    return (
      &lt;div className={classes.root}&gt;
        &lt;FormControl className={clsx(classes.formControl, classes.noLabel)}&gt;
                  &lt;Select
                      value={values.units}
                      onChange={handleChange('units')}
                      autoWidth
                      renderValue={selected =&gt; {
                          console.log(selected);
                          if (!selected) return "Placeholder";
                          else return selected;
                      }}
                  &gt;
                      {/* TODO: Add default value from the array */}
                      {units.map((unit) =&gt; (
                          &lt;MenuItem key={unit} value={unit}&gt;{unit}&lt;/MenuItem&gt;
                      ))}
                  &lt;/Select&gt;
              &lt;/FormControl&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>If I put </p>
  
  <pre><code>&lt;MenuItem disabled value=""&gt;
    &lt;em&gt;Placeholder&lt;/em&gt;
  &lt;/MenuItem&gt;
  </code></pre>
  
  <p>before the map() function, it shows "placeholder" as a disabled option of the menu list but that's not what I need.</p>
  
  <p>I've also tried to set condition like:</p>
  
  <pre><code>if (selected.length === 0)
  if (selected === '')
  </code></pre>
  
  <p>It looks like when I click on the Select list, I can console log the <code>selected</code> value but by default, it's not triggered.</p>