ReactJS filter including an array list

Question

 {nDATA
          .filter((newData) => newData.titles.includes(props.currentFilter))
          .map((value, index) => (

So in the code above I have nDATA which is an array of objects that I am filtering and mapping out.

Then I also have props.currentFilter which is a prop being passed into this component that is an array list for example

["Apples", "Oranges", "Strawberries", "Grapes"]

What I am trying to do here is get my filter setup here to check each newData.titles for each of the arrays in props.currentFilter. That way when I am searching for say Apples and Oranges and Grapes, it will check each thing for each of those and if it has 1 of them it goes through. My setup right now is working perfect if I pass just a string into the includes by doing props.currentFilter[0] but that does me no good for what I am trying to do here. I have been trying to test a few ways to do this and have been struggling to figure this out, any help would be much appreciated =D

If it is a string then iamuchejude's answer should work... if it's an array then you can try: .filter(newData => props.currentFilter.some(str => newData.titles.includes(str))) — Nick Parsons
– Nick Parsons, Commented Jul 14, 2020 at 2:52
Looks like it was an array lol. That worked perfect, post that as an answer and ill give ya checkmark. I appreciate your time greatly! — CodingIsFun33
– CodingIsFun33, Commented Jul 14, 2020 at 2:54

Nick Parsons · Accepted Answer · 2020-07-14 02:47:41Z

2

You can use .some() in your filter method to check if some value from your props.currentFilter is included within your newData.titles array:

nDATA
  .filter(newData => props.currentFilter.some(str => newData.titles.includes(str)))

edited Jul 14, 2020 at 2:47

answered Jul 14, 2020 at 2:37

Nick Parsons

51.7k6 gold badges61 silver badges80 bronze badges

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

Comments

iamuchejude · Accepted Answer · 2020-07-14 02:43:33Z

0

nData.filter(newData => props.currentFilter.includes(newData.titles))

answered Jul 14, 2020 at 2:43

iamuchejude

661 silver badge4 bronze badges

1 Comment

CodingIsFun33 Over a year ago

Does not seem to work but I am trying to see if maybe I can see why its not working lol. Also I fixed the nDATA so its not that. Its just coming back as no results

Hyetigran · Accepted Answer · 2020-07-14 02:58:44Z

0

An optimal way to run this function would be to turn your currentFilter array into an object with the keys being your filter words. Values can be anything.

let filterObj = props.currentFilter.reduce((acc, cur) => {
 acc[cur] = 1
 return acc
}, {})

which should return

filterObj = {
 "apples": 1,
 "oranges": 1,
 "bananas": 1,
}

Then run your filter loop and call hasOwnProperty method which returns a boolean

{nDATA
          .filter((newData) => currentFilter.hasOwnProperty(newData.titles))
          .map((value, index) => (

answered Jul 14, 2020 at 2:58

Hyetigran

1,2253 gold badges15 silver badges32 bronze badges

3 Comments

Nick Parsons Over a year ago

If you're using an object for the sole purpose of efficient look-up then you'd be better of using a Set for that :)

Hyetigran Over a year ago

@NickParsons thanks for the tip! Do Sets and Objects in JS have different lookup runtimes?

Nick Parsons Over a year ago

They both should be the same, so you can expect O(1) for both .has() (on the set) and object lookup.

Collectives™ on Stack Overflow

ReactJS filter including an array list

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related