title: filtering a list by 2 keys in react
body: <p>I would like to have my parent pass some conditions to the child, to filter through a list and return businesses from the list that meet the criteria.
  eg.</p>
  
  <pre><code>if (service === pub &amp;&amp; town === Ipswich) 
  return business.name.
  </code></pre>
  
  <p>here is my parent component so far:</p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './backgroundimage.jpg';
  import './App.css';
  import {Child} from './Child.js';
  
   class Parent extends Component {
  
  
     state={
       service: '',
       town: ''
     }
  
     search (service,town) {
       this.setState({service, town});
     }
  
     render() {
       return (
         &lt;div className="App"&gt;
           &lt;Child service={this.state.service} town={this.state.town}/&gt;
         &lt;/div&gt;
       );
    }
  }
  
  export default Parent;
  </code></pre>
  
  <p>ideally I would like to have the input a selection from a number of options in two drop down boxes.</p>
  
  <p>here is my child component so far, where I would like to keep the list and return filtered items back to be rendered in the parent component.</p>
  
  <pre><code>import React from 'react';
  import {Parent} from './App.js';
  
  
  export class Child extends React.Component{
    constructor(props){
      super(props)
    }
  
    state={
      businesses: [
        { service:'Pub',
          town:'rosewood',
          name:'Rising Sun'},
  
        { service:'Club',
          town:'ipswich',
          name:'Metro'},
  
        { service:'Club',
          town:'ipswich',
          name:'Switch'},
  
        { service:'Restaurant'
          town:'ipswich',
          name: 'Dustys'},
  
        { service:'Pub',
          town:'rosewood',
          name: 'The Royal Hotel'},
      ]
  };
  
  check () {
    const {service,town} = this.props;
    return list.find(item =&gt; {
      if (service === item.service){return item.name}
      if (town === item.postCode){return item.name}
    })
  }
  
  render () {
    return (
      &lt;div&gt;
        &lt;p&gt;{this.check()}&lt;/p&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p>}</p>
  
  <p>I want to have the list stored in a child component, so that I can be constantly extending the list as I build bigger, while having it separate from the parent component.</p>