title: How can I have multiple filters on my data in React?
body: <p>I am having trouble having multiple filters on my list of data in react. Currently I have one filter working which is only returning the list item if the city of the data matches the filter city, but how can I simultaneously filter the price, city, and also search all together ? </p>
  
  <p>here is my component </p>
  
  <pre><code>            import React, { Component } from 'react'
              import ListingStreamItem from './ListingStreamItem'
              import zipcodes from 'zipcodes'
              class Home extends Component {
                  constructor(props) {
                      super(props)
                      this.handleChange = this.handleChange.bind(this)
                      this.state = {
                          visitor_city: '',
  
                      }
                  }
                  componentDidMount() { 
                      const _this = this;
                      $.get("https://ipinfo.io", function(response) {
                          console.log(response.city, response.country);
                          _this.setState({
                              visitor_city: response.city
                          })
                      }, "jsonp");
  
                  }
                  handleChange(e) {
                      this.setState({
                          [e.target.name] : e.target.value
                      })
                  }
                  render(){
  
                      const user = this.props.user !== null ? true : false
                      const listings = this.props.listings == null ? 'There are no listings available at this time' : Object.keys(this.props.listings).reverse().map((key) =&gt; {
                          var areEqual = this.state.visitor_city.toUpperCase() === this.props.listings[key].city.toUpperCase();
  
                          if (areEqual) {
                              return (
                                  &lt;li key={key}&gt;
                                      &lt;ListingStreamItem 
                                          id={key}
                                          title={this.props.listings[key].title}
                                          desc={this.props.listings[key].description}
                                          price={this.props.listings[key].price}
                                          zipcode={this.props.listings[key].zipcode}
                                          images={this.props.listings[key].listingimages}
                                      /&gt;
                                  &lt;/li&gt;
                              )
                          }
                      }) 
                      return(
                          &lt;div&gt;
  
                          &lt;select name="visitor_city" onChange={this.handleChange}&gt;
                              &lt;option value="orlando"&gt;Orlando &lt;/option&gt;
                              &lt;option value="new york city"&gt;New York City&lt;/option&gt;
                          &lt;/select&gt;
                          &lt;p&gt;Or Zip Code &lt;/p&gt;
                          &lt;input type='number' min="0" name='miles_from_zip' placeholder="miles" value={this.state.miles_from_zip} /&gt;
                          &lt;input type='text' name="zipcode" placeholder="from zip" value={this.state.zipcode} /&gt;
                          &lt;button&gt;Filter &lt;/button&gt;
                          &lt;ul&gt;
                              {listings}
                          &lt;/ul&gt;
  
                          &lt;/div&gt;
                      )
                  }
              }
  
              export default Home
  </code></pre>