title: How to change material-ui select value?
body: <p>Let's start by consider this little snippet:</p>
  <pre><code>import &quot;./styles.css&quot;;
  import List from &quot;@material-ui/core/List&quot;;
  import ListItem from &quot;@material-ui/core/ListItem&quot;;
  import ListItemIcon from &quot;@material-ui/core/ListItemIcon&quot;;
  import ListItemSecondaryAction from &quot;@material-ui/core/ListItemSecondaryAction&quot;;
  import ListItemText from &quot;@material-ui/core/ListItemText&quot;;
  import Checkbox from &quot;@material-ui/core/Checkbox&quot;;
  import Select from &quot;@material-ui/core/Select&quot;;
  import React, { Component } from &quot;react&quot;;
  
  class WidgetList extends Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
  
    onChangeTag = (event, item) =&gt; {
      item.tag = event.target.value;
      console.log(&quot;changing tag&quot;, event.target, item.name);
    };
  
    render() {
      const { allItems } = this.props;
      const { selectedItems } = this.props;
  
      return (
        &lt;List&gt;
          {allItems.map((item) =&gt; {
            return (
              &lt;ListItem
                key={item.name}
                role={undefined}
                dense
                button
                disableRipple
              &gt;
                &lt;ListItemIcon&gt;
                  &lt;Checkbox
                    edge=&quot;start&quot;
                    checked={selectedItems.has(item)}
                    tabIndex={-1}
                    disableRipple
                  /&gt;
                &lt;/ListItemIcon&gt;
                &lt;ListItemText primary={`${item.name}`} /&gt;
                &lt;ListItemSecondaryAction&gt;
                  &lt;Select
                    native
                    value={item.tag}
                    onChange={(e) =&gt; this.onChangeTag(e, item)}
                  &gt;
                    &lt;option value={0}&gt;foo&lt;/option&gt;
                    &lt;option value={1}&gt;bar&lt;/option&gt;
                    &lt;option value={2}&gt;baz&lt;/option&gt;
                  &lt;/Select&gt;
                &lt;/ListItemSecondaryAction&gt;
              &lt;/ListItem&gt;
            );
          })}
        &lt;/List&gt;
      );
    }
  }
  
  let allItems = [
    { name: &quot;1&quot;, tag: 0 },
    { name: &quot;2&quot;, tag: 1 },
    { name: &quot;3&quot;, tag: 2 }
  ];
  let selectedItems = new Set([allItems[0], allItems[1]]);
  
  export default function App() {
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;WidgetList allItems={allItems} selectedItems={selectedItems} /&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>I'd like to understand what's the way to change the value of the select widgets when clicking a different
  one. Right now no matter which one you select the widget won't change.</p>
  <p>To see what I mean you can play with it on this <a href="https://codesandbox.io/s/mutable-fast-t696j" rel="noreferrer">sandbox</a>, no matter if you select <code>foo</code>, <code>bar</code>, <code>baz</code> values on the select widget the widget itself won't update.</p>