Filter React Native Data

All we need is an easy explanation of the problem, so here it is.

I searched all day but I didn’t find the solution to my problem.
I’m new to React Native so I’m stucked …

Here’s my problem :

I fetch an api to the get data, I’m doing it with axios and it’s ok I can render my component !

Then I don’t want to display ALL ITEMS of my Array but I want to display some items according to different values with 2 buttons :

<Button onPress={Get ALL ITEMS with this value}/>
<Button onPress={Get ALL ITEMS with ANOTHER VALUE} />

My issue is that I’m modifying the state of my array ‘products’ with new information but that’s not what I want. I always want that I’m displaying information according to a particular VALUE in the Array and still get my Full Array…

Here’s some piece of code of what I’m doing :

onPressFirstButton() {
let newArray = [...this.state.products];

this.setState({
  products: newArray.filter(function(product){
    return product.value == 32;
  })
});
}
onPressSecondButton() {
let otherArray = [...this.state.products];

this.setState({
  products: otherArray.filter(function(product){
    return product.other_value == 389;
  })
});
}

I’m sure it’s not the best way because it’s not working.. I hope you will understand what I’m trying to say..

Thank you

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Since you seem to be using the products property to populate your template, consider using a separate variable for that instead, that way you don’t have to mess with your state when doing your filtering. Maybe this will help:

displayProducts = []

onPressFirstButton () {
  this.displayProducts = this.state.products.filter(product => /* logic */)
}

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply