title: How to filter an array onClick in React
body: <p>I am trying to filter an array of coffee based on its origin via a button click in React. Right now, whenever a button is clicked the array goes to 0 instead of the desired result of however many items contain the origin clicked. Thanks for your help. Feel free to critique my code as well - I am just beginning!</p>
  
  <pre><code>
  class Coffee extends React.Component {
  
    constructor() {
      super();
      this.state = { coffees: [
    {
      name: 'Banko',
      origin: 'Ethiopia',
      price: 16
    },
    {
      name: 'Pueblo',
      origin: 'Costa Rica',
      price: 14
    },
    {
      name: 'Don Pablo',
      origin: 'Columbia',
      price: 13
    },
    {
      name: 'Hava Lama',
      origin: 'Columbia',
      price: 15
    },
    {
      name: 'Guillermo Salva',
      origin: 'Ethiopia',
      price: 19
    },
    {
      name: 'Salla Rosa',
      origin: 'Kenya',
      price: 20
    },
    {
      name: 'Santor Gustavio',
      origin: 'Panama',
      price: 25
        }
       ] 
      }
     }
  
    handleClick = event =&gt; {
      const byOrigin = event.target.value
  
      const filterCoffee = this.state.coffees.filter(coffee =&gt; coffee[origin] === [byOrigin])
      this.setState({coffees: filterCoffee})
  
    }
  
  
    render() {
  
      const renderAll = this.state.coffees.map(coffee =&gt; &lt;li key={Date.now()}&gt;{coffee.name}&lt;/li&gt;)
  
  
      return (
  
        &lt;div&gt;
          &lt;button value='all' onClick={this.handleClick}&gt;All&lt;/button&gt;
          &lt;button value='Ethiopia' onClick={this.handleClick}&gt;Ethiopia&lt;/button&gt;
          &lt;button value='Costa Rica' onClick={this.handleClick}&gt;Costa Rica&lt;/button&gt;
          &lt;button value='Kenya' onClick={this.handleClick}&gt;Kenya&lt;/button&gt;
          &lt;button value='Columbia' onClick={this.handleClick}&gt;Columbia&lt;/button&gt;
          &lt;button value='Panama' onClick={this.handleClick}&gt;Panama&lt;/button&gt;
  
  
          &lt;p&gt;Coffee: {renderAll}&lt;/p&gt;
          &lt;p&gt;{this.state.coffees.length}&lt;/p&gt;
  
        &lt;/div&gt;
  
      )
    }
  }
  
  ReactDOM.render(&lt;Coffee /&gt;, document.getElementById('root'))
  
  </code></pre>