title: How refresh a Flatlist with Input's text using Json API
body: <p>I'm trying to refresh the Flatlist when a user type something in the search bar, but I don't know exactly how to do it.</p>
  
  <p>The goal here is to display all french county returned by the API and when you enter something in the search bar the API will return only certain county</p>
  
  <p>I'm using NativeBase and Axios</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react'
  import { View, StyleSheet, StatusBar, ListView, FlatList} from 'react-native'
  import { } from 'react-navigation'
  import { Container, Header, Title, Content, Footer, FooterTab, Button, Left, Right, Body, Icon, Text, List, ListItem, Spinner, Toast, Root, Input, Item } from 'native-base';
  import axios from 'axios';
  import { Directions } from 'react-native-gesture-handler';
  
  export default class Home extends React.Component {
  
    constructor(props) {
      super(props)
      this.state = {
        data : null,
        departement : ""
      }
      this.fetchDepartements();
    }
  
    fetchDepartements() {
      axios.get('http://192.168.1.12/APIGSBPraticien.php?departement=' + this.state.departement).then((response) =&gt; {
        console.log(response.data)
        this.setState({data : response.data})
      })
      .catch(error =&gt; {
        console.log(error);
      });
    }
  
    renderItem = ({ item }) =&gt; {
      return (
        &lt;ListItem&gt;
          &lt;Text&gt;{item.PRA_Departement==null ? "Code Postal: " + item.PRA_CP:item.PRA_Departement}&lt;/Text&gt;
        &lt;/ListItem&gt;
      )
    }
  
    handleSearch = (text) =&gt; {
      console.log(text);
      this.setState({departement: text}),
      () =&gt; { this.fetchDepartements}
    };
  
      render() {
        if (this.state.data === null) {
          return(
            &lt;Container style={{marginTop: 20}}&gt;
            &lt;StatusBar translucent={false} /&gt;
            &lt;Header&gt;
              &lt;Left&gt;
                &lt;Button onPress={() =&gt; this.props.navigation.openDrawer()} transparent&gt;
                  &lt;Icon name='menu' /&gt;
                &lt;/Button&gt;
              &lt;/Left&gt;
              &lt;Body&gt;
                &lt;Title&gt;Accueil&lt;/Title&gt;
              &lt;/Body&gt;
            &lt;/Header&gt;
            &lt;Content&gt;
            &lt;Spinner style={{marginVertical:250}} color='green'/&gt;
            &lt;/Content&gt;
          &lt;/Container&gt;
          )
        } else {
          return (
            &lt;Root&gt;
            &lt;Container style={{marginTop: 20}}&gt;
            &lt;StatusBar translucent={false} /&gt;
            &lt;Header&gt;
              &lt;Left&gt;
                &lt;Button onPress={() =&gt; this.props.navigation.openDrawer()} transparent&gt;
                  &lt;Icon name='menu' /&gt;
                &lt;/Button&gt;
              &lt;/Left&gt;
              &lt;Body&gt;
                &lt;Title&gt;Accueil&lt;/Title&gt;
              &lt;/Body&gt;
            &lt;/Header&gt;
            &lt;Header searchBar rounded&gt;
            &lt;Item&gt;
                  &lt;Icon name="search" /&gt;
                  &lt;Input onSubmitEditing={text =&gt; this.handleSearch(text)} placeholder="Rechercher ..." /&gt;
            &lt;/Item&gt;
            &lt;/Header&gt;
            &lt;Content&gt;
            &lt;FlatList 
                data={this.state.data}
                renderItem={this.renderItem}
                keyExtractor={item =&gt; item.PRA_NUM}
                onEndReached={()=&gt; Toast.show({
                  text: 'Chargement terminé !',
                  type: "success",
                  textStyle: {marginHorizontal:100}
                })}
              /&gt;
            &lt;/Content&gt;
          &lt;/Container&gt;
          &lt;/Root&gt;
          )
        }
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to get the user's input ( handleSearch() ) and update the state but once done I want to refresh the Flatlist.</p>