How to call an async function in TextInput's onChangeText - react-native

Question

Here is my code
SearchFilterFunction(text) {
callApi = async () => {
try {
const response = await
fetch('http://192.168.100.229:9085/api/V1AndroidUnAuthorizedFastSearch?
title=${text}');
const responseJson = await response.json();
this.setState({
isLoading: false,
dataSource: responseJson.data,
}, function () {
});
}
catch (error) {
console.error(error);
}
}
}
render() {
return (
<View style={{ flexDirection: 'column' }}>
<View style={{
flexDirection: 'column',
alignItems: 'stretch',
}}>
<View style={{
height: 50,
backgroundColor: '#008cff',
flexDirection: 'row',
justifyContent: 'space-between'
}} >
<Image source={require('./asset/ic_buy_package.png')}
style={{ width: 30, height: 30, marginTop: 10, marginLeft: 10 }}
/>
<Image source={require('./asset/img_logo.png')}
style={{ width: 30, height: 30, marginTop: 10 }} />
<TouchableHighlight onPress={this.callApi}>
<Image source={require('./asset/ic_menu.png') }
style={{ width: 30, height: 30, marginTop: 10, marginRight:
10, }}
/>
</TouchableHighlight>
</View>
</View>
<View style={{
height: 50,
backgroundColor: "#008cff"
}}>
<TextInput
style={{ height: 40, backgroundColor: '#ffffff', marginRight: 10,
marginLeft: 10, marginTop: 5, textAlign: 'right', paddingRight: 10 }}
placeholder='جستجو...'
onChangeText={text => this.SearchFilterFunction(text).callApi}
onClear={text => this.SearchFilterFunction().callApi}
/>
</View>
<Text>{this.state.input}</Text>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text style={{fontSize:15,margin:10}}>
{item.title}</Text>}
keyExtractor={({id}, index) => id}
/>
</View>
);
}
};
but when type in TextInput i get this error
undefined is not an object
(evaluating'_this3.searchfilterfunction(text).callApi'
I want get text from TextInput and fetch my API with the entered text.

Answer 1

There are several problems here:
1) You are defining a function inside a function
SearchFilterFunction(text) {
callApi = async () => {
2) If you want to insert a variable value inside a string use ` instead of '.
3) This function call does not work this.SearchFilterFunction(text).callApi
Modifications:
Change your function to SearchFilterFunction to:
async SearchFilterFunction(text) {
try {
const response = await
fetch(`http://192.168.100.229:9085/api/V1AndroidUnAuthorizedFastSearch?
title=${text}`);
const responseJson = await response.json();
console.log('response', responseJson);
// set your state here
}
catch (error) {
console.error(error);
}
}
Change your TextInput to:
<TextInput
style={{ height: 40, backgroundColor: '#ffffff', marginRight: 10,
marginLeft: 10, marginTop: 5, textAlign: 'right', paddingRight: 10 }}
onChangeText={text => this.SearchFilterFunction(text)}
onClear={text => this.SearchFilterFunction()}
/>
Working example:
I created a simplified working example here:
https://snack.expo.io/S1LWHvH2V