this.arrayholder.filter is not a function

[TusharAswal]

import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator, TouchableOpacity } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";
import {Actions } from 'react-native-router-flux';

class FlatListDemo extends Component {
constructor(props) {
super(props);

this.state = {
  loading: false,
  data: [],
  page: 1,
  seed: 1,
  error: null,
  refreshing: false,
  text:'',
};

this.arrayholder = [];

}

componentDidMount() {
this.makeRemoteRequest();
}

makeRemoteRequest = () => {
const { page, seed } = this.state;
const url = https://randomuser.me/api/?seed=${seed}&page=${page}&results=20;
this.setState({ loading: true });

fetch(url)
  .then(res => res.json())
  .then(res => {
    this.setState({
      data: page === 1 ? res.results : [...this.state.data, ...res.results],
      error: res.error || null,
      loading: false,
      refreshing: false,
     
    }, function() {
    
      // In this block, you can do something with new state.
      this.arrayholder = res ;
               
      }
  
  );
  })
  .catch(error => {
    this.setState({ error, loading: false });
  });

};

handleRefresh = () => {
this.setState(
{
page: 1,
seed: this.state.seed + 1,
refreshing: true
},
() => {
this.makeRemoteRequest();
}
);
};

handleLoadMore = () => {
this.setState(
{
page: this.state.page + 1
},
() => {
this.makeRemoteRequest();
}
);
};

renderSeparator = () => {
return (
<View
style={{
height: 1,
width: "86%",
backgroundColor: "#CED0CE",
marginLeft: "14%"
}}
/>
);
};

SearchFilterFunction(text){
console.log(this.arrayholder);
const newData = this.arrayholder.filter(function(item){
const itemData = item.name.first.toUpperCase()
const textData = text.toUpperCase()
return itemData.indexOf(textData) > -1
})
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newData),
text: text
})
}

renderHeader = () => {

return <SearchBar placeholder="Type Here..." lightTheme round onChangeText={(text) => this.SearchFilterFunction(text)}
value={this.state.text}/>;

};

renderFooter = () => {
if (!this.state.loading) return null;

return (
  <View
    style={{
      paddingVertical: 20,
      borderTopWidth: 1,
      borderColor: "#CED0CE"
    }}
  >
    <ActivityIndicator animating size="large" />
  </View>
);

};

render() {
return (
<List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<ListItem

          roundAvatar
          title={`${item.name.first} ${item.name.last}`}
          subtitle={item.email}
          avatar={{ uri: item.picture.thumbnail }}
          containerStyle={{ borderBottomWidth: 0 }}
          />
        
      )}
      keyExtractor={item => item.email}
      ItemSeparatorComponent={this.renderSeparator}
      ListHeaderComponent={this.renderHeader}
      ListFooterComponent={this.renderFooter}
      onRefresh={this.handleRefresh}
      refreshing={this.state.refreshing}
      onEndReached={this.handleLoadMore}
      onEndReachedThreshold={50}
    />
  </List>
);

}
}

export default FlatListDemo;

[react-native-bot]

Thanks for posting this! It looks like your issue may be incomplete. Are all the fields required by the Issue Template filled out?

You may safely ignore this if you believe your issue contains all the relevant information. Thank you for your contributions.

_{How to Contribute • What to Expect from Maintainers}

[jamsch]

1. This is not a react-native issue. If you have a javascript issue, try posting on Stack Overflow
2. That API link you posted (https://randomuser.me/api/?seed=${seed}&page=${page}&results=20) returns an object, not an array. You're assigning this.arrayholder to { results: [] }. You can't run { results: [] }.filter(), this.arrayholder.results.filter may work however

[TusharAswal]

thanx @jamsch for the quick reply, and sorry for posting this issue here I am totally newbie in this field.