title: Handle checkbox in React app
body: <p>In my React app I am trying to catch some event when checkbox is clicked in order to proceed some state filtering, and show only items are needed.
  <code>event</code> is coming from child's checkbox with some <code>name</code>. There is 3 checkboxes, so I need to know the <code>name</code> which one is clicked.</p>
  
  <p>some of them</p>
  
  <pre><code>&lt;input 
    type="checkbox" 
    name="name1"
    onClick={filterHandler} 
  /&gt;Something&lt;/div&gt;
  </code></pre>
  
  <p>state is something like </p>
  
  <pre><code>state = {
    items = [
     { 
      name: "name1",
      useful: true
     },{
      name: "name2",
      useful: false
     }],
  
     filteredItems: []  
  } 
  </code></pre>
  
  <p>here is the handler</p>
  
  <pre><code> filterHandler = (evt) =&gt; {
  
      let checked = evt.target.checked;
      let name = evt.target.name;
  
      let filteredItems = this.state.items.filter(item =&gt; {
       return item[name] === checked; // filtered [{...},{...}...]
      });
  
      // when filtered - push to state and show all from here in &lt;ItemsList /&gt;
      this.setState({ filteredItems })
   }
  </code></pre>
  
  <p>ItemsList component for "showing" is like so:</p>
  
  <pre><code>&lt;ItemsList 
    items={this.state.filteredItems.length === 0 ? this.state.items : this.state.filteredItems}
            /&gt; 
  </code></pre>
  
  <p>When checkbox is one and only - its working fine. But I have three of those boxes -- complications appears:</p>
  
  <p>1) when checking next box I operate with original un-filtered items array - so for this purpose I need already filtered array.
  2) I cant use my <code>filteredItems</code> array reviously filtered, because when unchecking box that array gets empty.To have 3rd "temporary" array seems a little weird.</p>
  
  <p>I tried this way, pretty similar also</p>
  
  <pre><code>this.setState({
    filteredItems: this.state.items.filter(item =&gt; {
      if (item[name] === checked) {
        console.log('catch');
        return Object.assign({}, item)
      } else {
        console.log('no hits') 
      }
   })
  </code></pre>
  
  <p>and this is almost good, but when uncheck <code>filteredItems</code> are filled with opposite values ((</p>
  
  <p>I feel there is a better approach, please suggest.  </p>