React - How do I un-filter.() my array of objects?

Question

I am pulling an array of objects from an external API. I am taking this array of objects called trails and using .filter() to filter the objects based on a input field, userInput. Here's what the code looks like:

 onChange = (e) => {
   let trails = this.props.trails;
   const userInput = e.currentTarget.value;
   const filteredTrails = trails.filter(
     (obj) => obj.name.toLowerCase().indexOf(userInput.toLowerCase()) > -1);
   console.log(userInput);
   console.log(filteredTrails);
   this.props.searchTrails(this.state.filteredTrails);
   this.setState({
     userInput,
   });
 };

As you can see, I pass filteredTrails as props to the searchTrails method in my App level component. It looks like this:

const searchTrails = (filteredTrails) => {
    setTrails(filteredTrails);
    console.log(filteredTrails);
  };

My issue is that the filter only works one way.

If the user wanted to hit backspace for instance, how do I add trails back to this filteredTrails array of objects?

Thanks in advance!

Milton · Accepted Answer · 2020-04-29 06:18:11Z

1

There is no reverse of "filter", this is why filter doesn't modify the original array, instead it returns a new array. So where your code goes wrong is that you override the "source" with the filtered version. So you'd have to get the full source from your API again which is a waste since it likely didn't change.

Now, I'm guessing that based on the way your app is structured that it's not the same component that does filtering and displaying of the found trails maybe? In either case, don't be afraid to store an extra array of what is currently being displayed.

So your data flow might be:
Get full list from API, store in rawTrails AND filteredTrails (in your App component)
Users types something
Create a subset from rawTrails and store in filteredTrails (use this to display this list or whatever it is you're doing)
User types something else or clears their filter
Set filteredTrails = rawTrails

Another option is to simply filter the raw list on each render (trading memory usage for CPU usage)

edited Apr 29, 2020 at 6:18

answered Apr 28, 2020 at 23:07

Milton

1,0225 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Scott Wells Over a year ago

This is so helpful! Thank you!

mahathun · Accepted Answer · 2020-04-28 23:00:02Z

0

shouldnt you add, filteredTrails without using it from state ?

   this.props.searchTrails(filteredTrails);

answered Apr 28, 2020 at 23:00

mahathun

791 silver badge8 bronze badges

Collectives™ on Stack Overflow

React - How do I un-filter.() my array of objects?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related