title: How can I return a new array based on a search criteria?
body: <p>I am trying to figure out how can I develop a search box. </p>
  
  <p>I have this array <code>passengersData</code> which is coming from a redux store. </p>
  
  <p>All of the examples about search functionality on React I've seen are based on local state with the search input in the same component where the rendered data array lives. But I need to pass the value of the search box to the child component, and then, what can I do to perform the search?</p>
  
  <p>This is the child component:</p>
  
  <pre><code>// imports
  
  const PassengerCardBasedOnRoute = ({
    passengersData,
    searchParam,
  }) =&gt; {
    return (
        &lt;View&gt;
          {passengersData &amp;&amp;
             passengersData.map(info =&gt; (
              &lt;PassengersInfo
                key={info.id}
                searchParam={searchParam}
                name={info.name}
                callModal={popupsModalsActionHandler}
              /&gt;
            ))}
        &lt;/View&gt;
    );
  };
  
  // Props validatiom
  
  export default compose(
    connect(
      store =&gt; ({
        passengersData: store.homeScreen.passengersData,
      }),
      dispatch =&gt; ({
        popupsModalsActionHandler: data =&gt; {
          dispatch(popupsModalsAction(data));
        },
      }),
    ),
  )(PassengerCardBasedOnRoute);
  </code></pre>
  
  <p>And this is the component that will hold the search box:</p>
  
  <pre><code>// imports
  // CHILD COMPONENT
  import PassengerCardBasedOnRoute from '../PassengerInfo/PassengerCardBasedOnRoute';
  
  class AllPassengersList extends Component {
    state = { searchParam: '' };
  
    render() {
      const { searchParam } = this.state;
      return (
        &lt;View&gt;
          {isVisible &amp;&amp; (
            &lt;View&gt;
              &lt;TextInput
                onChangeText={text =&gt; this.setState({ searchParam: text })}
                value={searchParam}
              /&gt;
            &lt;/View&gt;
          )}
          &lt;PassengerCardBasedOnRoute searchParam={searchParam} /&gt;
        &lt;/View&gt;
      );
    }
  }
  
  // Props validation
  
  export default compose(
    connect(store =&gt; ({
      navigationStore: store.homeScreen.navigation,
      passengersData: store.homeScreen.passengersData,
    })),
  )(AllPassengersList);
  </code></pre>
  
  <p>So, based on my code, how can I grab the value and what should I do to perform the search across <code>passengersData</code> array?</p>
  
  <p>Also, as you may see, <code>passengersData</code> is coming from a redux store.</p>