title: Filter The List Using Multiple CheckBoxes in React Js
body: <p>Hello guys i am trying to filter the list of array of objects onClick of the checkbox based on a condition, but my else condition in handle method's is returning me a same array the state doesn't change,so i want default  list that is remove filtered list when i try to uncheck the checkbox on all of it.</p>
  <pre><code>import React from &quot;react&quot;;
  import &quot;./Search.css&quot;;
  
  class Search extends React.Component {
    constructor() {
      super();
      this.state = {
        searchLists: [
          {
            id: 1,
            type: &quot;All&quot;,
            name: &quot;Akash&quot;,
            location: &quot;bangalore&quot;,
            experience: 1
          },
          {
            id: 2,
            type: &quot;FullTime&quot;,
            name: &quot;feroz&quot;,
            location: &quot;mumbai&quot;,
            experience: 3
          },
          {
            id: 3,
            type: &quot;PartTime&quot;,
            name: &quot;Farheen&quot;,
            location: &quot;agra&quot;,
            experience: 5
          },
          {
            id: 4,
            type: &quot;Freelancer&quot;,
            name: &quot;Raju&quot;,
            location: &quot;chennai&quot;,
            experience: 6
          },
          {
            id: 5,
            type: &quot;All&quot;,
            name: &quot;Asif&quot;,
            location: &quot;vegas&quot;,
            experience: 7
          }
        ],
        checked: false
      };
    }
  
    handleAll = () =&gt; {
      console.log(&quot;i clicked&quot;);
      if (this.state.checked === false) {
        const filteredAll = this.state.searchLists.filter(
          item =&gt; item.type === &quot;All&quot;
        );
  
        console.log(filteredAll);
        this.setState({ searchLists: filteredAll, checked: true });
      } else {
        setTimeout(() =&gt; {
          this.setState({
            searchLists: this.state.searchLists,
            checked: false
          });
        }, 10000);
      }
    };
  
    handleFullTime = () =&gt; {
      if (this.state.checked === false) {
        const filteredFullTime = this.state.searchLists.filter(
          item =&gt; item.type === &quot;FullTime&quot;
        );
        console.log(filteredFullTime);
        this.setState({ searchLists: filteredFullTime, checked: true });
      } else {
        setTimeout(() =&gt; {
          this.setState({
            searchLists: this.state.searchLists,
            checked: false
          });
        }, 10000);
      }
    };
  
    handlePartTime = () =&gt; {
      if (this.state.checked === false) {
        const filteredPartTime = this.state.searchLists.filter(
          item =&gt; item.type === &quot;PartTime&quot;
        );
        console.log(filteredPartTime);
        this.setState({ searchLists: filteredPartTime, checked: true });
      } else {
        setTimeout(() =&gt; {
          this.setState({
            searchLists: this.state.searchLists,
            checked: false
          });
        }, 10000);
      }
    };
  
    handleFreelancer = () =&gt; {
      if (this.state.checked === false) {
        const filteredFreelancer = this.state.searchLists.filter(
          item =&gt; item.type === &quot;Freelancer&quot;
        );
        console.log(filteredFreelancer);
        this.setState({ searchLists: filteredFreelancer, checked: true });
      } else {
        setTimeout(() =&gt; {
          this.setState({
            searchLists: this.state.searchLists,
            checked: false
          });
        }, 10000);
      }
    };
  
    render() {
      console.log(&quot;rendered&quot;);
      const mapped = this.state.searchLists.map(item =&gt; {
        return (
          &lt;div key={item.id}&gt;
            &lt;li&gt;
              {item.name}
              {item.type}
            &lt;/li&gt;
          &lt;/div&gt;
        );
      });
      return (
        &lt;div className=&quot;searchContainer&quot;&gt;
          &lt;form&gt;
            &lt;label htmlFor=&quot;myInput&quot;&gt;All&lt;/label&gt;
            &lt;input
              id=&quot;myInput&quot;
              type=&quot;checkbox&quot;
              onClick={this.handleAll}
              checked={this.state.checked}
            /&gt;
            &lt;label htmlFor=&quot;myInput&quot;&gt;FullTime&lt;/label&gt;
            &lt;input id=&quot;myInput&quot; type=&quot;checkbox&quot; onClick={this.handleFullTime} /&gt;
            &lt;label htmlFor=&quot;myInput&quot;&gt;PartTime&lt;/label&gt;
            &lt;input id=&quot;myInput&quot; type=&quot;checkbox&quot; onClick={this.handlePartTime} /&gt;
            &lt;label htmlFor=&quot;myInput&quot;&gt;Freelancer&lt;/label&gt;
            &lt;input id=&quot;myInput&quot; type=&quot;checkbox&quot; onClick={this.handleFreelancer} /&gt;
          &lt;/form&gt;
          &lt;ul style={{ marginLeft: &quot;70px&quot; }}&gt;{mapped}&lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default Search;
  
  
  </code></pre>
  <p>here is the link to my code <a href="https://codesandbox.io/s/eloquent-brattain-orv76?file=/src/Search.js" rel="noreferrer">https://codesandbox.io/s/eloquent-brattain-orv76?file=/src/Search.js</a></p>