title: Adding Search Bar into Flatlist using Hook, Undefined
body: <p>i try to create flatlist inside modal with search bar functionality that can filter the result based on user input in the search bar.</p>
  <p>For the flatlist everything show up accordingly,
  problem i can't filter the data,
  i try using .filter from the original full data (list) but result is always undefined is not a data.</p>
  <p>Btw data is populate from local .json file to state using useEffect.</p>
  <p>Here is the local country.json data  :</p>
  <pre><code>[
  &quot;Japan&quot;, 
  &quot;Korea&quot;, 
  &quot;Thailand&quot;, 
  &quot;Indonesia&quot; ]
  </code></pre>
  <p>Here is part of the source code  :</p>
  <pre><code>import dataCountry from '../../assets/json/country.json';
  </code></pre>
  <p>const NameScreen = ({ navigation }) =&gt; {</p>
  <pre><code>// hook
  const [list, setList] = useState([]);
  const [modalBirthplace, setModalBirthplace] = useState(false);
  const [searchText, setSearchText] = useState('');
  
  useEffect(() =&gt; {
      setList({ dataCountry });
      console.log('check List : ', list);
  }, [])
  
  const renderItem = ({ item }) =&gt; (
      &lt;Item title={item.title} /&gt;
  );
  
  const ListItem = ({ title }) =&gt; (
      &lt;View&gt;
          &lt;TouchableOpacity onPress={() =&gt; console.log(&quot;ok&quot;)}&gt;
              &lt;Text style={styles.cityList}&gt;{title}&lt;/Text&gt;
          &lt;/TouchableOpacity&gt;
      &lt;/View&gt;
  );
  
  const searchFilterFunction = searchText =&gt; {
  
      setSearchText(searchText);
      console.log(searchText)
  
      const newData = list.filter((item) =&gt; { // error trigger from this list.filter undefined is not a function
          const itemData = item.toUpperCase();
          const textData = searchText.toUpperCase();
          return itemData.indexOf(textData) &gt; -1;
        });
  
      setList(newData);
  };
  
  return (
      &lt;View style={styles.container}&gt;
          &lt;Modal
              animationType=&quot;slide&quot;
              transparent={true}
              visible={modalBirthplace}
              onRequestClose={() =&gt; {
                  Alert.alert('Modal has been closed.');
              }}&gt;
              &lt;View style={styles.centeredView}&gt;
                  &lt;View style={styles.modalView}&gt;
                      &lt;Text style={styles.modalText}&gt;Choose your country location :&lt;/Text&gt;
                      &lt;TextInput
                          placeholder=&quot;Try japan maybe?&quot;
                          onChangeText={searchText =&gt; searchFilterFunction(searchText)}
                          value={searchText}
                      /&gt;
                      &lt;FlatList
                          data={list.dataCountry}
                          renderItem={({ item }) =&gt; (
                              &lt;ListItem
                                  title={item}
                              /&gt;
                          )}
                          keyExtractor={item =&gt; item}
                      /&gt;
                      &lt;TouchableHighlight
                          style={{ ...styles.openButton, backgroundColor: '#E15C72' }}
                          onPress={() =&gt; {
                              setModalBirthplace(!modalBirthplace);
                          }}&gt;
                          &lt;Text style={styles.textStyle}&gt;Close Selection&lt;/Text&gt;
                      &lt;/TouchableHighlight&gt;
                  &lt;/View&gt;
              &lt;/View&gt;
          &lt;/Modal&gt;
      &lt;/View&gt;
  )
  </code></pre>
  <p>}</p>
  <p>Anybody know why i can't filter the state?</p>
  <p>Thanks a lot before</p>