title: React native Filtering API flatlist
body: <p>I'm building my first react native app and connected my app to a mockable API</p>
  
  <p>Before had I had a data.js file, but recently wanted to test the app with an live API.</p>
  
  <p>Now I'm having problems filtering trough my API. Before hand I would import my Data.JS file and extract the object and put it in my state. Then I would set that equal to the filteredObject. </p>
  
  <p>Now I've replaced my data file with my API </p>
  
  <p>I've got a test running <a href="https://snack.expo.io/@salman15/sadistic-apple" rel="nofollow noreferrer">here</a></p>
  
  <p><strong>What I'm expecting:</strong></p>
  
  <p>To filter trough my FlatList</p>
  
  <p><strong>What I'm getting:</strong></p>
  
  <pre><code>undefined is not an object (evaluating 'row.restraunt.indexOf')
  </code></pre>
  
  <p><strong>Fetching API</strong></p>
  
  <pre><code>export default class FetchExample extends React.Component {
  
    static navigationOptions = {
          header: null,
      };
      constructor(props){
          super(props);
          this.state ={ 
        isLoading: true,
      }
      }
  
      componentDidMount(){
          return fetch('https://demo3381137.mockable.io/')
              .then((response) =&gt; response.json())
              .then((responseJson) =&gt; {
  
                  this.setState({
                      isLoading: false,
                      dataSource: responseJson.restraunts,
  
  
                  }, function(){
  
                  });
  
              })
              .catch((error) =&gt;{
                  console.error(error);
              });
      }
  </code></pre>
  
  <p><strong>Filtering trough API</strong></p>
  
  <pre><code>setSearchText(event) {
      const searchText = event.nativeEvent.text;
      // const textLength = this.state.rows.length;
  
      const filteredTexts = this.state.dataSource.filter(row =&gt; {
        return row.restraunt.indexOf(searchText) !== -1;
          });
          console.log("text: " + JSON.stringify(filteredTexts));
  
      this.setState({ 
        searchText,
        filteredRows: filteredTexts
      });
      }
  </code></pre>
  
  <p><strong>List Component</strong></p>
  
  <pre><code>    renderRow = (rowData) =&gt; { 
      return (
          &lt;View&gt;
            &lt;Text&gt;
                          {rowData.item.restraunt}, {rowData.item.type}
            &lt;/Text&gt;
          &lt;/View&gt;
      )
    }
  </code></pre>
  
  <p><strong>Rendering FlatList</strong></p>
  
  <pre><code>render() {
  
          if(this.state.isLoading){
              return(
                  &lt;View style={styles.loading}&gt;
                      &lt;ActivityIndicator/&gt;
                  &lt;/View&gt;
              )
          }
  
      return (
  
          &lt;View style={styles.container}&gt;
        {console.log(this.state.dataSource)} 
              &lt;View style={styles.SearchBarContainer}&gt; 
                      &lt;TextInput
                      placeholder="Search"
                    value={this.state.searchText}
                    onChange={this.setSearchText.bind(this)}
                    style={styles.searchBar}
                    underlineColorAndroid="black"
                    selectionColor="black"
                  /&gt;
                  &lt;/View&gt;
          &lt;FlatList
            style={styles.listContainer}
            data={this.state.dataSource}
            renderItem={this.renderRow}
            keyExtractor={(item, index) =&gt; index.toString()}
          /&gt;
        &lt;/View&gt;   
      )
    }
  </code></pre>