title: Toggle filter list with Material-UI
body: <p>I'm trying to filter trough my response data using Axios and ReactJS. </p>
  
  <p>I've used Material-UI for their <a href="https://material-ui.com/demos/selection-controls" rel="nofollow noreferrer">selection controls</a> to toggle the filters. </p>
  
  <p>Using the event handler to pass different data into Axios and reloading the current data.</p>
  
  <p>I'm trying to have multiple filter possibilities, example:</p>
  
  <p>Filter option A, B &amp; C</p>
  
  <p>Toggle filter options A: display filter A</p>
  
  <p>With toggle filter A still on true and I hit toggle filter B: display filter A&amp;B</p>
  
  <p>I hope I explained it well enough. I want to be able to filter multiple parameters at the same time.</p>
  
  <p>My code is a bit sloppy cause this is quite new to me. As I've created the same function twice and ideally I would be able to filter trough multiple value's with one function and get the parameter trough the selected toggle, but I fist want to get the filtering to work.  </p>
  
  <p>I've tried multiple variations of my current code. Trying to change the filter value's of filter1 or filter2</p>
  
  <p><strong>Constructor, mounting of the data, event-handler</strong></p>
  
  <pre><code>    super(props);
      const { classes } = props;
      const { products, images } = this.props;
      const filteredproducts = '' ;
      this.state = {
        productsData: {},
        isLoading: true,
        error: null,
        products,
        images,
        classes,
        filteredproducts : products,
        expanded: null,
        gilad: false,
        jason: false,
        include: '?include=images',
        url: 'https://stern-telecom-react-salman15.c9users.io/api/v2/storefront/products',
        filter1: '',
        filter2: '',
  
      };
    }
  
    componentDidMount() {
  
      this.setState({ isLoading: true });
      axios.get(this.state.url + this.state.include)
        .then(result =&gt; this.setState({
          productsData: result.data,
          filteredproducts: result.data.data,
          images: result.data.included,
          isLoading: false,
        }))
        .catch(error =&gt; this.setState({
          error,
          isLoading: false
        }));
      if ( this.state.isloading == false) {
        nouislider.create(this.refs.slider2, {
          start: [0, 100],
          connect: [false, true, false],
          step: 1,
            range: { 
              min: 0, 
              max: 100 
            }
        });
      }
    }
  
  
    handleChange = panel =&gt; (event, expanded) =&gt; {
      this.setState({
        expanded: expanded ? panel : false,
      });
    };
  
    handleFormChange1 = name =&gt; event =&gt; {
  
      if( event.target.checked != true ) {
  
      this.setState({ 
        isLoading: true, 
        [name]: '',
         filter1: 'filter[taxons]=1',
      });
      axios.get( this.state.url + this.state.include + '&amp;'+ this.state.filter1 + '&amp;'+ this.state.filter2)
        .then(result =&gt; this.setState({
          productsData: result.data,
          filteredproducts: result.data.data,
          images: result.data.included,
          isLoading: false,
        }))
        .catch(error =&gt; this.setState({
          error,
          isLoading: false
        }));
         console.log('true',event.target.checked, this.state.url + this.state.include + '&amp;'+ this.state.filter1 + '&amp;'+ this.state.filter2)
      }
      else {
        this.setState({ 
          isLoading: true, 
          [name]: event.target.checked,
         filter1: '',
  
        });
        axios.get(this.state.url + this.state.include + '&amp;'+ this.state.filter1 + '&amp;'+ this.state.filter2)
          .then(result =&gt; this.setState({
            productsData: result.data,
            filteredproducts: result.data.data,
            images: result.data.included,
            isLoading: false,
          }))
          .catch(error =&gt; this.setState({
            error,
            isLoading: false
          }));
          console.log('false', event.target.checked, this.state.url + this.state.include + '&amp;'+ this.state.filter1 + '&amp;'+ this.state.filter2)
      }
    };
  
  
  handleFormChange2 = name =&gt; event =&gt; {
      if( event.target.checked != true ) {
      this.setState({ 
        isLoading: true, 
        [name]: '',
        filter2: 'filter[taxons]=3',
      });
  
  
      axios.get(this.state.url + this.state.include + '&amp;'+ this.state.filter1 + '&amp;'+ this.state.filter2)
        .then(result =&gt; this.setState({
          productsData: result.data,
          filteredproducts: result.data.data,
          images: result.data.included,
          isLoading: false,
        }))
        .catch(error =&gt; this.setState({
          error,
          isLoading: false
        }));
         console.log('true',[name],event.target.checked, this.state.API2 )
      }
      else {
        this.setState({ 
          isLoading: true, 
          [name]: event.target.checked,
          filter2: '',
        });
  
        axios.get(this.state.url + this.state.include + '&amp;'+ this.state.filter1 + '&amp;'+ this.state.filter2)
          .then(result =&gt; this.setState({
            productsData: result.data,
            filteredproducts: result.data.data,
            images: result.data.included,
            isLoading: false,
          }))
          .catch(error =&gt; this.setState({
            error,
            isLoading: false
          }));
          console.log('false', [name], event.target.checked, this.state.API2)
      }
      console.log(event.target.checked)
    };  
  
  </code></pre>
  
  <p><strong>User interaction</strong></p>
  
  <pre><code>
                &lt;ExpansionPanel defaultExpanded={true}&gt;
                  &lt;ExpansionPanelSummary expandIcon={&lt;ExpandMoreIcon /&gt;}&gt;
                    &lt;Typography className={this.state.classes.heading}&gt;Model&lt;/Typography&gt;
                    &lt;Typography className={this.state.classes.secondaryHeading}&gt;Redmi, Go, Mi, Pro&lt;/Typography&gt;
                  &lt;/ExpansionPanelSummary&gt;
                  &lt;ExpansionPanelDetails&gt;
                   &lt;FormControl component="fieldset"&gt;
                    &lt;FormLabel component="legend"&gt;Assign responsibility&lt;/FormLabel&gt;
                    &lt;FormGroup&gt;
                      &lt;FormControlLabel
                        control={
                          &lt;Switch
                            checked={this.state.gilad}
                            onChange={this.handleFormChange1('gilad')}
                            value="gilad"
                          /&gt;
                        }
                        label="Mi"
                      /&gt;
                      &lt;FormControlLabel
                        control={
                          &lt;Switch
                            checked={this.state.jason}
                            onChange={this.handleFormChange2('jason')}
                            value="jason"
                          /&gt;
                        }
                        label="Redmi"
                      /&gt;
                      &lt;FormControlLabel
                        control={
                          &lt;Switch
                            checked={this.state.antoine}
                            onChange={this.handleFormChange3('antoine')}
                            value="antoine"
                          /&gt;
                        }
                        label="Go"
                      /&gt;
                    &lt;/FormGroup&gt;
                    &lt;FormHelperText&gt;Be careful&lt;/FormHelperText&gt;
                  &lt;/FormControl&gt;
                  &lt;/ExpansionPanelDetails&gt;
                &lt;/ExpansionPanel&gt;
  </code></pre>
  
  <p>What I'm expecting is that when I toggle multiple filter options I get a data feed that actually displays the filtered data (Filter option A and Filter option B)</p>
  
  <p>So when I execute <code>handleFormChange1</code> for example I set the state of <code>filter1</code> to <code>=taxon</code></p>
  
  <p>and when I execute <code>handleFormChange2</code> the state of filter2 to a different taxon</p>
  
  <p>What happens now is that if I give filter1 a value and then toggle filter2, filter1's value is emptied again.</p>
  
  <p><strong>UPDATE! GOT FILTERS TO WORK BUT...</strong></p>
  
  <p>I've managed to simplify my code and am able to toggle filters, but it's still buggy. What I mean is that I have to hit the toggle twice before the changes are in effect. </p>
  
  <p>As you can see in the code below, when the <code>handleFormChange</code> function is executed it changes the state for the filters if it's respective toggle is set to <code>true</code></p>
  
  <p>But what happens when I press toggle the first time is that my productlist get updated with before the respective filter is changed. So I have to press the same toggle a second time before it loads the change. </p>
  
  <p>I expect to press the toggle button once and the filter value gets changed and then the <code>productslist</code> gets refreshed</p>
  
  <p>What happens I have to press the toggle button multiple times before the filter value changes get's passed on.</p>
  
  <pre><code>  handleFormChange = name =&gt; event =&gt; {
      //Change filter's value when the button's value has changed to true or false
      this.setState({ 
        isLoading: true, 
        [name]: event.target.checked,
        filter1: this.state.mi === true ? "1," : '',
        filter2: this.state.redmi === true ? "3," : '',
        filter3: this.state.go === true ? "4,": '',
  
      });
      //Check if the filter is changed
      console.log('filtersSet', this.state.filter1, this.state.filter2, this.state.filter3)
      //Get new data request from API with new filter value's
        axios.get(this.state.url + this.state.include + '&amp;'+ this.state.taxons + this.state.filter1 + this.state.filter2+ this.state.filter3 + this.state.filter4 + this.state.filter5 + this.state.filter6)
          .then(result =&gt; this.setState({
            productsData: result.data,
            filteredproducts: result.data.data,
            images: result.data.included,
            isLoading: false,
          }))
          .catch(error =&gt; this.setState({
            error,
            isLoading: false
          }));
          //check the value passed on, the value of the event target and if the state has been changed. 
         console.log(name,event.target.checked, this.state.filter1 , this.state.filter2, this.state.filter3, this.state.mi , this.state.redmi, this.state.go)
    };
  </code></pre>
  
  <pre><code>&lt;React.Fragment&gt;
          &lt;div className={this.state.classes.root}&gt;
            &lt;GridContainer&gt;
              &lt;GridItem xs={12} sm={12} md={3} className={this.state.classes.marginAuto}&gt;
                &lt;ExpansionPanel defaultExpanded={true}&gt;
                    &lt;ExpansionPanelSummary expandIcon={&lt;ExpandMoreIcon /&gt;}&gt;
                      &lt;Typography className={this.state.classes.heading}&gt;Model&lt;/Typography&gt;
                      &lt;Typography className={this.state.classes.secondaryHeading}&gt;Redmi, Go, Mi, Pro&lt;/Typography&gt;
                    &lt;/ExpansionPanelSummary&gt;
                    &lt;ExpansionPanelDetails&gt;
                     &lt;FormControl component="fieldset"&gt;
                      &lt;FormLabel component="legend"&gt;Assign responsibility&lt;/FormLabel&gt;
                      &lt;FormGroup&gt;
                        &lt;FormControlLabel
                          control={
                            &lt;Switch
                              checked={this.state.mi}
                              onChange={this.handleFormChange('mi')}
                              value="1,"
                            /&gt;
                          }
                          label="Mi"
                        /&gt;
                        &lt;FormControlLabel
                          control={
                            &lt;Switch
                              checked={this.state.redmi}
                              onChange={this.handleFormChange('redmi')}
                              value="3,"
                            /&gt;
                          }
                          label="Redmi"
                        /&gt;
                        &lt;FormControlLabel
                          control={
                            &lt;Switch
                              checked={this.state.go}
                              onChange={this.handleFormChange('go')}
                              value="4,"
                            /&gt;
                          }
                          label="Go"
                        /&gt;
                      &lt;/FormGroup&gt;
                      &lt;FormHelperText&gt;Be careful&lt;/FormHelperText&gt;
                    &lt;/FormControl&gt;
                    &lt;/ExpansionPanelDetails&gt;
                  &lt;/ExpansionPanel&gt;
  
                  &lt;ExpansionPanel defaultExpanded={true}&gt;
                    &lt;ExpansionPanelSummary expandIcon={&lt;ExpandMoreIcon /&gt;}&gt;
                      &lt;Typography className={this.state.classes.heading}&gt;Advanced settings&lt;/Typography&gt;
                      &lt;Typography className={this.state.classes.secondaryHeading}&gt;
                        Filtering has been entirely disabled for whole web server
                      &lt;/Typography&gt;
                    &lt;/ExpansionPanelSummary&gt;
                    &lt;ExpansionPanelDetails&gt;
                      &lt;div className={this.state.classes.sliderContainer}&gt;
                        &lt;div className="slider-info noUi-active" ref="slider2"  /&gt;
                      &lt;/div&gt;
                    &lt;/ExpansionPanelDetails&gt;
                  &lt;/ExpansionPanel&gt;
  
                  &lt;ExpansionPanel defaultExpanded={true}&gt;
                    &lt;ExpansionPanelSummary expandIcon={&lt;ExpandMoreIcon /&gt;}&gt;
                      &lt;Typography className={this.state.classes.heading}&gt;Users&lt;/Typography&gt;
                      &lt;Typography className={this.state.classes.secondaryHeading}&gt;
                        You are currently not an owner
                      &lt;/Typography&gt;
                    &lt;/ExpansionPanelSummary&gt;
                    &lt;ExpansionPanelDetails&gt;
                       &lt;FormControl component="fieldset"&gt;
                      &lt;FormLabel component="legend"&gt;Assign responsibility&lt;/FormLabel&gt;
                      &lt;FormGroup&gt;
                        &lt;FormControlLabel
                          control={
                            &lt;Switch
                              checked={this.state.gilad1}
                              onChange={this.handleFormChange('gilad1')}
                              value="gilad"
                            /&gt;
                          }
                          label="32GB"
                        /&gt;
                        &lt;FormControlLabel
                          control={
                            &lt;Switch
                              checked={this.state.jason1}
                              onChange={this.handleFormChange('jason1')}
                              value="jason"
                            /&gt;
                          }
                          label="64GB"
                        /&gt;
                        &lt;FormControlLabel
                          control={
                            &lt;Switch
                              checked={this.state.antoine1}
                              onChange={this.handleFormChange('antoine1')}
                              value="antoine"
                            /&gt;
                          }
                          label="126GB"
                        /&gt;
                      &lt;/FormGroup&gt;
                      &lt;FormHelperText&gt;Be careful&lt;/FormHelperText&gt;
                    &lt;/FormControl&gt;
                    &lt;/ExpansionPanelDetails&gt;
                  &lt;/ExpansionPanel&gt;
              &lt;/GridItem&gt;
            {
               (error) ? (
                  &lt;GridItem xs={12} sm={12} md={9} className={this.state.classes.productContainer}&gt; 
                    &lt;p&gt;{error.message}&lt;/p&gt;
                  &lt;/GridItem&gt; 
              ): (isLoading) ?  (
                    &lt;GridItem xs={12} sm={12} md={9} className={this.state.classes.productContainer}&gt; 
                        &lt;Loading/&gt;
                    &lt;/GridItem&gt;
              ): (isLoading) == false ? (
                &lt;GridItem xs={12} sm={12} md={9} className={this.state.classes.productContainer}&gt; 
                  &lt;GridList cellHeight={180}  cols={4} className={this.state.classes.gridList}&gt;
                    {filteredproducts.map(product =&gt;
                    &lt;GridListTile className={this.state.classes.card}  rows={1} key={product.id}&gt;
                      &lt;Card  rows={1} className={this.state.classes.center}&gt;
                        &lt;CardHeader color="warning"&gt;
                          {product.attributes.name}
                        &lt;/CardHeader&gt;
                        &lt;CardBody&gt;
                          {product.relationships.images.data.length &gt; 0 &amp;&amp;
                              (() =&gt; {
                                const { id } = product.relationships.images.data[0];
                                const image = images.find(image =&gt; image.id == id);
                                return image ? (
                                      &lt;img key={images.key} src={`${url}/${image.attributes.styles[2].url}`} /&gt;
                                ) : null;
                              })()}
                          &lt;h4 className={this.state.classes.cardTitle}&gt;
                            {product.attributes.display_price}
                          &lt;/h4&gt;
                          &lt;Button color="primary" href={url + productUrl + product.attributes.slug }&gt;
                              View
                          &lt;/Button&gt;
                        &lt;/CardBody&gt;
                      &lt;/Card&gt;
                    &lt;/GridListTile&gt;
                    )}
                  &lt;/GridList&gt;
                &lt;/GridItem&gt;
              ) : (isLoading)
            }
          &lt;/GridContainer&gt;
        &lt;/div&gt; 
      &lt;/React.Fragment&gt;
  </code></pre>