error while binding the ListView - reactjs

Question

I am getting an error in my render function when I am binding my listView. Below is the code and the screen shot of the error:
My code is below. I am trying to put the search box on top of my list view. Everything was working fine, but as soon as I tried to put the search box, I started getting the above error:
import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView, TextInput} from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux'
import reducers from '../reducers/ServiceReducer';
import ServiceItem from './ServiceItem';
import Icon from 'react-native-vector-icons/EvilIcons';
import ServiceDetail from './ServiceDetail';
const styles = StyleSheet.create({
separator: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
},
text: {
marginLeft: 12,
fontSize: 16,
},
header_footer_style:{
width: '100%',
height: 45,
backgroundColor: '#FF9800'
},
textStyle:{
alignSelf:'center',
color: '#fff',
fontSize: 18,
padding: 7
},
MainContainer:
{
justifyContent: 'center',
flex:1,
margin: 10
},
TextStyle:
{
fontSize: 23,
textAlign: 'center',
color: '#000',
},
});
const store = createStore(reducers);
class AutoCompActivity extends Component {
constructor(props) {
super(props);
this.state = {
// Default Value of this State
text: '',
}
this.arrayholder =[];
}
SearchFilterFunction(text){
const newData = this.arrayholder.filter(function(item){
const itemData = item.services.ser.toUpperCase()
const textData = text.toUpperCase()
return itemData.indexOf(textData) > -1
})
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newData),
text: text
})
}
renderHeader = () => {
var header = (
<View style={styles.header_footer_style}>
<Text style={styles.textStyle}> Tap the service to find the Loaction </Text>
</View>
);
return header;
};
renderInitialView() {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
});
this.setState({
dataSource : ds.cloneWithRows(this.props.services),
}, function(){
this.arrayholder=this.props.services;
});
if (this.props.detailView === true) {
return (
<ServiceDetail />
);
} else {
return (
<View style={styles.MainContainer}>
<TextInput
style={styles.TextInputStyleClass}
onChangeText={(text) => this.SearchFilterFunction(text)}
value={this.state.text}
underlineColorAndroid='transparent'
placeholder="Search Here"
/>
<ListView
enableEmptySections={true}
dataSource={this.state.dataSource}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
renderHeader={this.renderHeader}
style={{marginTop:10}}
renderRow={(rowData) =>
<ServiceItem services={rowData} />
}
/>
</View>
);
}
}
render() {
return (
<View style={styles.container}>
{this.renderInitialView()}
</View>
);
}
}
const mapStateToProps = state => {
return {
services: state.services,
detailView: state.detailView,
};
};
const ConnectedAutoCompActivity = connect(mapStateToProps)(AutoCompActivity);
const app1 = () => (
<Provider store={store}>
<ConnectedAutoCompActivity />
</Provider>
)
export default app1;
My JSON (service.json) file looks like below:
[
{
"id":0,
"ser": "Test Service",
"Location": "TestLoc",
"Phone1":"(999)-999-5050",
"SecondLoc": "TestLoc2",
"email":"test#test.com",
"sourceLat":"33.977806",
"sourceLong":"-117.373261",
"destLatL1":"33.613355",
"destLongL1":"-114.596569",
"destLatL2":"33.761693",
"destLongL2":"-116.971169",
"destAddr1": "Test Address, Test Drive",
"destAddr2": "Test Address2, Test Drive2",
"onlineURL":"",
"Phone2": "(900)-900-3333"
},
]
Any help will be highly appreciated.

Answer 1

Bind your functions in your constructor:
this.SearchFilterFunction = this.SearchFilterFunction.bind( this );
or use arrow functions:
SearchFilterFunction = ( text ) => { ... };
About binding functions: https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56