title: apply multiple filters react
body: <p>I have 2 buttons which when clicked should filter by <code>novelty</code> or <code>offer</code> , I am able to make it so that when novelty is clicked it will filter by this but I am unable to make it so that if both are click it will filter by both <code>novelty</code> and <code>offer</code></p>
  
  <p>How can I make it so that when both novelty and offer are clicked it will filter by both of these?</p>
  
  <p><a href="https://www.webpackbin.com/bins/-KpVGNEN7ZuKAFODxuER" rel="noreferrer">https://www.webpackbin.com/bins/-KpVGNEN7ZuKAFODxuER</a></p>
  
  <pre><code>import React from 'react'
  
  export default class extends React.Component {
    constructor() {
      super()
  
      this.state = {
        products: [
          { id: 1, novelty: true, offer: false, name: 'test1' },
          { id: 2, novelty: true, offer: true, name: 'test2' },
          { id: 3, novelty: false, offer: true, name: 'test3' } 
          ],
        display: 'all',
        filters: [
          {novelty:'true'},
          {offer: 'true'}
        ]
      }
    }
  
    setCategory (category) {
      this.setState({
        display: category 
      });
    }
  
   render() {
     return(
     &lt;div&gt;
        &lt;button onClick={()=&gt;this.setCategory(true)}&gt;Akce&lt;/button&gt;
        &lt;button onClick={()=&gt;this.setCategory(true)}&gt;Offer&lt;/button&gt;
             {
        this.state.products.filter( product =&gt; 
         products.offer === this.state.display ||
          this.state.display==='all')
          .map(product =&gt;
           &lt;div&gt;{product.name}&lt;/div&gt;
             )
              }
     &lt;/div&gt;
      )
    }
  }
  </code></pre>