title: React Material UI deselect
body: <p>I am following <a href="http://thrysoee.dk/material-ui/" rel="nofollow noreferrer">this</a> example to implement a MUI select field im my application. I could get the code to work for me but I have a few problems. It doesn't let me deselect a value which i select. Also i would like to have the ability to add a new value by typing in , if the value is not in the rendered list. Is this possible? </p>
  
  <p>Here is my code : </p>
  
  <pre><code>export class FormPage extends React.Component {
  
      constructor() {
        super();
  
        this.state = {'resource': '', 'catvalues': '', 'subcatvalues': '', 'prodvalues': '', 'solutionValues': '', 'nsocValues': '', 'statusValues': ''};
  
        this.selectionRenderer1 = this.selectionRenderer1.bind(this);
        this.selectionRenderer2 = this.selectionRenderer2.bind(this);
        this.selectionRenderer3 = this.selectionRenderer3.bind(this);
        this.selectionRenderer4 = this.selectionRenderer4.bind(this);
        this.selectionRenderer5 = this.selectionRenderer5.bind(this);
        this.selectionRenderer6 = this.selectionRenderer6.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.addResource = this.addResource.bind(this);
      }
  
      handleChange1 = (event, key, catvalues) =&gt; {
        this.setState({catvalues});
      };
  
      selectionRenderer1 = catvalues =&gt; {
        // change the default comma separated rendering
        return (
            &lt;span style={{color: '#ff4081'}}&gt;
                {catvalues.join('; ')}
            &lt;/span&gt;
        ).bind(this);
      };
  
      menuItems1(catvalues) {
        return categorylist.map(cl =&gt; (
            &lt;MenuItem
                key={cl}
                insetChildren
                checked={catvalues.includes(cl)}
                value={cl}
                primaryText={cl}
            /&gt;
        ));
      }
  
      handleChange2 = (event, key, subcatvalues) =&gt; {
        this.setState({subcatvalues});
      };
  
      selectionRenderer2 = subcatvalues =&gt; {
        // change the default comma separated rendering
        return (
            &lt;span style={{color: '#ff4081'}}&gt;
                {subcatvalues.join('; ')}
            &lt;/span&gt;
        );
      };
  
      menuItems2(subcatvalues) {
        return subcategorylist.map(scl =&gt; (
            &lt;MenuItem
                key={scl}
                insetChildren
                checked={subcatvalues.includes(scl)}
                value={scl}
                primaryText={scl}
            /&gt;
        ));
      }
  
      handleChange3 = (event, key, prodvalues) =&gt; {
        this.setState({prodvalues});
      };
  
      selectionRenderer3 = prodvalues =&gt; {
        // change the default comma separated rendering
        return (
            &lt;span style={{color: '#ff4081'}}&gt;
                {prodvalues.join('; ')}
            &lt;/span&gt;
        ).bind(this);
      };
  
      menuItems3(prodvalues) {
        return prodlist.map(pl =&gt; (
            &lt;MenuItem
                key={pl}
                insetChildren
                checked={prodvalues.includes(pl)}
                value={pl}
                primaryText={pl}
            /&gt;
        ));
      }
  
      handleChange4 = (event, key, solutionValues) =&gt; {
        this.setState({solutionValues});
      };
  
      selectionRenderer4 = solutionValues =&gt; {
        // change the default comma separated rendering
        return (
            &lt;span style={{color: '#ff4081'}}&gt;
                            {solutionValues.join('; ')}
                    &lt;/span&gt;
        ).bind(this);
      };
  
      menuItems4(solutionValues) {
        return solutionList.map(sl =&gt; (
            &lt;MenuItem
                key={sl}
                insetChildren
                checked={solutionValues.includes(sl)}
                value={sl}
                primaryText={sl}
            /&gt;
        ));
      }
  
      handleChange5 = (event, key, nsocValues) =&gt; {
        this.setState({nsocValues});
      };
  
      selectionRenderer5 = nsocValues =&gt; {
        // change the default comma separated rendering
        return (
            &lt;span style={{color: '#ff4081'}}&gt;
                            {nsocValues.join('; ')}
                    &lt;/span&gt;
        ).bind(this);
      };
  
      menuItems5(nsocValues) {
        return nsocList.map(nl =&gt; (
            &lt;MenuItem
                key={nl}
                insetChildren
                checked={nsocValues.includes(nl)}
                value={nl}
                primaryText={nl}
            /&gt;
        ));
      }
  
      handleChange6 = (event, key, statusValues) =&gt; {
        this.setState({statusValues});
      };
  
      selectionRenderer6 = statusValues =&gt; {
        // change the default comma separated rendering
        return (
            &lt;span style={{color: '#ff4081'}}&gt;
                            {statusValues.join('; ')}
                    &lt;/span&gt;
        ).bind(this);
      };
  
      menuItems6(statusValues) {
        return statusList.map(sll =&gt; (
            &lt;MenuItem
                key={sll}
                insetChildren
                checked={statusValues.includes(sll)}
                value={sll}
                primaryText={sll}
            /&gt;
        ));
      }
  
      addResource(resource) {
        console.log('Adding resource:', resource);
        $.ajax({
          type: 'POST', url: '/api/resources', contentType: 'application/json',
          data: JSON.stringify(resource),
          success: function(data) {
            console.log(data);
            browserHistory.push('/home');
          }.bind(this),
          error: function(xhr, status, err) {
            // ideally, show error to user.
            console.log('Error adding resource:', err);
          }
        });
      }
  
      handleSubmit(e) {
        e.preventDefault();
        var form = document.forms.resourceAdd;
        this.addResource({
          category: form.category.value,
          subcategory: form.subcategory.value,
          product: form.product.value,
          solution: form.solution.value,
          weight: form.weight.value,
          nsoc: form.nsoc.value,
          status: form.status.value,
          date_product_added: form.date_product_added.value,
          design_status: form.design_status.value,
          design_combined: form.design_combined.value,
          implement_status: form.implement_status.value,
          implement_combined: form.implement_combined.value,
          operate_status: form.operate_status.value,
          operate_combined: form.operate_combined.value});
        // clear the form for the next input
        form.category.value = ''; form.subcategory.value = ''; form.product.value = ''; form.solution.value = ''; form.weight.value = ''; form.nsoc.value = ''; form.status.value = '';form.date_product_added.value = '';
        form.design_status.value = ''; form.design_combined.value = ''; form.implement_status.value = ''; form.implement_combined.value = ''; form.operate_status.value = ''; form.operate_combined.value = '';
      }
  
      render() {
        const {catvalues} = this.state;
        const floatingLabelText1 = 'Categories' +
            (catvalues.length &gt; 1 ? ` (${catvalues.length})` : '');
  
        const {subcatvalues} = this.state;
        const floatingLabelText2 = 'Sub Categories' +
            (subcatvalues.length &gt; 1 ? ` (${subcatvalues.length})` : '');
  
        const {prodvalues} = this.state;
        const floatingLabelText3 = 'Products' +
            (prodvalues.length &gt; 1 ? ` (${prodvalues.length})` : '');
  
        const {solutionValues} = this.state;
        const floatingLabelText4 = 'Solutions' +
            (solutionValues.length &gt; 1 ? ` (${solutionValues.length})` : '');
  
        const {nsocValues} = this.state;
        const floatingLabelText5 = 'NSOC' +
            (nsocValues.length &gt; 1 ? ` (${nsocValues.length})` : '');
  
        const {statusValues} = this.state;
        const floatingLabelText6 = 'Status' +
            (statusValues.length &gt; 1 ? ` (${statusValues.length})` : '');
  
        return (
          &lt;PageBase title="Form Page"
                    navigation="Application / Form Page"&gt;
                                                    &lt;form&gt;
  
                                                        &lt;SelectField
                                multiple
                                floatingLabelText={floatingLabelText1}
                                fullwidth={true}
                                value={catvalues}
                                onChange={this.handleChange1}
                                selectionRenderer={this.selectionRenderer1}
                            &gt;
                                                                {this.menuItems1(catvalues)}
                                                        &lt;/SelectField&gt;
  
                                                        &lt;SelectField
                                multiple
                                floatingLabelText={floatingLabelText2}
                                fullwidth
                                value={subcatvalues}
                                onChange={this.handleChange2}
                                selectionRenderer={this.selectionRenderer2}
                            &gt;
                                                                {this.menuItems2(subcatvalues)}
                                                        &lt;/SelectField&gt;
  
                                                        &lt;SelectField
                                multiple
                                floatingLabelText={floatingLabelText3}
                                fullwidth
                                value={prodvalues}
                                onChange={this.handleChange3}
                                selectionRenderer={this.selectionRenderer3}
                            &gt;
                                                                {this.menuItems3(prodvalues)}
                                                        &lt;/SelectField&gt;
  
                                                      &lt;SelectField
                                                          multiple
                                                          floatingLabelText={floatingLabelText4}
                                                          fullwidth
                                                          value={solutionValues}
                                                          onChange={this.handleChange4}
                                                          selectionRenderer={this.selectionRenderer4}
                                                      &gt;
                                                          {this.menuItems4(solutionValues)}
                                                      &lt;/SelectField&gt;
  
                                                            &lt;TextField
                  hintText="Weight"
                  floatingLabelText="Weight"
                  fullWidth
              /&gt;
  
                                                      &lt;SelectField
                                                          multiple
                                                          floatingLabelText={floatingLabelText5}
                                                          fullwidth
                                                          value={nsocValues}
                                                          onChange={this.handleChange5}
                                                          selectionRenderer={this.selectionRenderer5}
                                                      &gt;
                                                          {this.menuItems5(nsocValues)}
                                                      &lt;/SelectField&gt;
  
  
                                                      &lt;SelectField
                                                          multiple
                                                          floatingLabelText={floatingLabelText6}
                                                          fullwidth
                                                          value={statusValues}
                                                          onChange={this.handleChange6}
                                                          selectionRenderer={this.selectionRenderer6}
                                                      &gt;
                                                          {this.menuItems6(statusValues)}
                                                      &lt;/SelectField&gt;
  
                                                            &lt;DatePicker
                  hintText="Date Product Added"
                  floatingLabelText="date_product_added"
                  fullWidth/&gt;
  
                                                            &lt;TextField
                  hintText="Design Status"
                  floatingLabelText="design_status"
                  fullWidth
              /&gt;
  
                                                            &lt;TextField
                  hintText="Design Players"
                  floatingLabelText="design_combined"
                  fullWidth
              /&gt;
  
                                                            &lt;TextField
                  hintText="Implement Status"
                  floatingLabelText="implement_status"
                  fullWidth
              /&gt;
  
                                                            &lt;TextField
                  hintText="Implement Players"
                  floatingLabelText="implement_combined"
                  fullWidth
              /&gt;
  
                                                            &lt;TextField
                  hintText="Operate Status"
                  floatingLabelText="operate_status"
                  fullWidth
              /&gt;
  
                                                            &lt;TextField
                  hintText="Operate Players"
                  floatingLabelText="operate_players"
                  fullWidth
              /&gt;
  
  
  
                                                            &lt;Divider/&gt;
  
                                                            &lt;div style={styles.buttons}&gt;
                                                                    &lt;Link to="/"&gt;
                                                                            &lt;RaisedButton label="Cancel"/&gt;
                                                                    &lt;/Link&gt;
  
                                                                    &lt;RaisedButton label="Save"
                              style={styles.saveButton}
                              type="submit"
                              onClick={this.handleSubmit.bind(this)}
                              primary/&gt;
                                                            &lt;/div&gt;
                                                    &lt;/form&gt;
                                            &lt;/PageBase&gt;
  
      );
      }
  }
  
  export default FormPage;
  </code></pre>