title: React Native Flatlist select filter not refreshing
body: <p>react native newbie here. I have an experimental program display values by Flatlist and a Select header at the top. The Flatlist display fine on first load when I try to select values from dropdown the Flastlist doesn't display the current array data.  Any ideas why it's not loading?</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image
  } from 'react-native';
  import { StackNavigator } from 'react-navigation';
  import {Select, Option} from "react-native-chooser";
  import FlatList from 'react-native/Libraries/Lists/FlatList';
  
  import demoData from './data';
  
  class HomeScreen extends React.Component {
  
    static navigationOptions = {
      title: 'Property Listing',
    };
  
    constructor(props) {
      super(props);
  
      this.state = {
        item: [],
        refreshing: false
      };
    }
  
    componentWillMount() {
      this.makeRemoteRequest({refreshing: false});
    }
  
    makeRemoteRequest = (data1) =&gt; {
  
      this.setState({refreshing: true});
  
        const item = [];
  
        for (let i = 0; i &lt; data.length; i++) {
          let obb = data[i].location.state;
  
          if(data1===obb) {
             item.push(data[i]);
          } 
          this.setState({refreshing: false});
        }
        console.log(item);
        return item;
  
    };
  
    handleRefresh = () =&gt; {
      this.setState({refreshing: true},
        () =&gt; {
          this.makeRemoteRequest();
        }
      );
    };
  
  
    renderHeader = () =&gt; {
      return (
        &lt;Select 
          onSelect = {this.makeRemoteRequest.bind(this)} 
          defaultText  = "Select a State" 
          style={styles.selectWrapper} 
          optionListStyle = {{backgroundColor : "#F5FCFF"}}&gt; 
            &lt;Option value = "Arizona"&gt;Arizona&lt;/Option&gt;
            &lt;Option value = "California"&gt;California&lt;/Option&gt;
            &lt;Option value = "New Hampshire"&gt;New Hampshire&lt;/Option&gt;
          &lt;/Select&gt;
      );
    };
  
    renderItem({item, index }) {
        return(
          &lt;View style={styles.container2}&gt;
            &lt;View&gt;&lt;Image source={{ uri: item.picture}} style={styles.photo} /&gt;&lt;/View&gt;
            &lt;View style={styles.info}&gt;
              &lt;View&gt;&lt;Text style={styles.headline}&gt;Address:&lt;/Text&gt;&lt;/View&gt;
              &lt;View&gt;&lt;Text style={styles.text}&gt;{`${item.location.street} ${item.location.city} ${item.location.state} ${item.location.postcode}`}&lt;/Text&gt;&lt;/View&gt;
              &lt;View&gt;&lt;Text&gt;Bed: {`${item.houseDetails.bed} Bath: ${item.houseDetails.bath} Rent: $${item.houseDetails.monthlyRent}`}&lt;/Text&gt;&lt;/View&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        );
    }
  
    render() {
  
      return (
        &lt;View style={styles.container}&gt;
          &lt;FlatList style={styles.container} data={demoData} renderItem={this.renderItem} ListHeaderComponent={this.renderHeader} refreshing={this.state.refreshing} onRefresh={this.handleRefresh}  keyExtractor={item =&gt; item.email}/&gt;
        &lt;/View&gt;
      );
    }
  }
  
  
  const HomeView = StackNavigator({
    Home: { screen: HomeScreen },
  });
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    container2: {
      flexWrap: 'wrap',
      padding: 10,
      backgroundColor: '#F0F0F0',
      borderColor: '#8E8E8E',
      borderWidth: StyleSheet.hairlineWidth,
    },
    selectWrapper: {
      flexWrap: 'wrap',
      padding: 10,
      backgroundColor: '#F0F0F0',
      borderColor: '#8E8E8E',
      borderWidth: StyleSheet.hairlineWidth,
      margin: 10,
      width: 340,
    },
    separator: {
      flex: 1,
      height: StyleSheet.hairlineWidth,
      backgroundColor: '#8E8E8E',
    },
    headline: {
      fontWeight: 'bold',
    },
    text: {
      fontSize: 16,
      textAlign :'left',
    },
    photo: {
      width: 340,
      height: 210,
      borderRadius: 2,
    },
    info: {
      padding: 10,
    },
  });
  
  AppRegistry.registerComponent('AwesomeProject3', () =&gt; HomeView);
  </code></pre>
  
  <p>I appreciate any ideas, I'm stuck with this for few days. I think I need some help. Thank you!</p>
  
  <p>=== UPDATE JSON DATA FILE ADDED</p>
  
  <p>name of file: data.js</p>
  
  <pre>
  
  export default data = [
    {
      "gender": "Male",
      "name": {
        "title": "Mr",
        "first": "Aiden",
        "last": "Lucas"
      },
      "email": "aiden.lucas@example.com",
      "phone": "(661)-131-8187",
      "cell": "(408)-707-4720",
      "houseDetails": {
        "bed": "1",
        "bath": "1",
        "area": "1100 sqft",
        "monthlyRent": '2800'
      },
      "location": {
        "street": "1446 Oak Lawn Ave",
        "city": "Lakewood",
        "state": "Arizona",
        "postcode": 60649
      },
      "picture": "https://maps.googleapis.com/maps/api/streetview?location=37.730064,-122.4245857&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
    },
    {
      "gender": "Male",
      "name": {
        "title": "Mr",
        "first": "Mario",
        "last": "Walters"
      },
      "email": "mario.walters@example.com",
      "phone": "(612)-481-1846",
      "cell": "(213)-966-9760",
      "houseDetails": {
        "bed": "2",
        "bath": "1",
        "area": "970 sqft",
        "monthlyRent": '2500'
      },
      "location": {
        "street": "266 Ney St",
        "city": "San Francisco",
        "state": "California",
        "postcode": 60649
      },
      "picture": "https://maps.googleapis.com/maps/api/streetview?location=37.7379437,-122.3875249&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
    },
    {
      "gender": "Male",
      "name": {
        "title": "Mr",
        "first": "Joseph",
        "last": "Lambert"
      },
      "email": "joseph.lambert@example.com",
      "phone": "(481)-952-7376",
      "cell": "(249)-044-4521",
      "houseDetails": {
        "bed": "2",
        "bath": "1",
        "area": "986 sqft",
        "monthlyRent": '3500'
      },
      "location": {
        "street": "2673 W Pecan St",
        "city": "Surrey",
        "state": "New Hampshire",
        "postcode": 12183
      },
      "picture": "https://maps.googleapis.com/maps/api/streetview?location=37.7352032,-122.3979859&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
    },
    {
      "gender": "female",
      "name": {
        "title": "Ms",
        "first": "Tina",
        "last": "Jennings"
      },
      "email": "tina.jennings@example.com",
      "phone": "(938)-316-5866",
      "cell": "(524)-445-7740",
      "houseDetails": {
        "bed": "1",
        "bath": "1",
        "area": "200 sqft",
        "monthlyRent": '1200'
      },
      "location": {
        "street": "600 Los Palmos Dr",
        "city": "San Francisco",
        "state": "California",
        "postcode": 60649
      },
      "picture": "https://maps.googleapis.com/maps/api/streetview?location=37.7349324,-122.4555814&size=1280x720&fov=90&key=AIzaSyA5W0tVVAfUcZmObnmWt836xzc4NWob2Z4"
    },
  ];
  
  </pre>
  
  <p>UPDATE--- 
  I already figure out how to display the array values. I condition the flatlist below and update the array value by doing set.state</p>