Filter button with react native - react-native

Question

I would like to create a button in order to filter some data
I am able to see everything I want to see and I can use the filter on "componentDidMount() setData"
I would use my function on "TouchableOpacity onPress={this.buttonFilterMac}"
Constructor :
constructor(props) {
super(props)
this.state = {
data: []
}
}
My Data :
componentDidMount() {
const url = 'https://next.json-generator.com/api/json/get/V1geuzIDB'
fetch(url)
.then((response) => response.json())
.then((responseJson) => {
this.setState({
data: responseJson.Employe
// data: responseJson.Employe.filter(x => x.Prenom == 'Abrahim')
})
})
.catch((error) => {
console.log('====================================');
console.log(error);
console.log('====================================');
})
}
My Fonction
buttonFilterMac({ item }){
data: responseJson.Employe.filter(x => x.Prenom == 'Abrahim')
}
My button with a image
<TouchableOpacity onPress={this.buttonFilterMac}>
<Image
source={button1}
style={{ width: 160, height: 18 }}
resizeMode="contain"
//style={styles.image_car}
/>
thank a lot for your help

Answer 1

On fetch you need to set the list of data:
this.setState({ data: responseJson.Employe })
When you click filter, you need to set state again with the filtered data in roder to see change in you Component:
buttonFilterMac = () => {
this.setState({ data: this.state.data.filter(x => x.Prenom === 'Abrahim') })
}
How ever, keep in mind when you set your filtered data, the ones not included in the filtered data would be lost. So maybe you could set the original data in a local variable after fetch or in the state. Then you could work with it later.
An example data array for a FlatList:
render() {
const data = this.state.filteredData || this.state.originalData;
return <FlatList data={data} />;
}
With the filter button you can turn on/off the filter, keep in mind to unset this.state.filteredData in order to display this.state.originalData.