React native filter array not working on string

Question

I am having issues trying to filter an array of message objects. I do not want to include the objects with "_id" value "receiver" or "blockedUsers".

Array of message objects:

[
  {"_id":"receiver"},
  {"_id":"blockedUsers"},
  {"_id": MjIzx3XA1mpcuzgDVZj","createdAt":1631349363111,"text":"Ok","user":{"name":"Nikki","_id":"M6fBsPludfYVjJXKYvwgxHRacYw1"}},
  {"_id":" MjG3hFAgcNweJWh9SF7","createdAt":1631300277391,"text":"Again","user":{"name":"Chris","_id":"tFhmw5oQoPhk8nF2sx5rE5BFqw93"}
 }
]

The following doesn't seem to work

this.state.messages.filter(msg => !msg._id.includes("receiver") || !msg._id.includes("blockedUsers")).

The original array is returned.

But if I use this

this.state.messages.filter(msg => msg._id.includes("receiver") || msg._id.includes("blockedUsers"))

it returns:

[{"_id":"receiver"},{"_id":"blockedUsers"}]

Can you please assist?

XCS · Accepted Answer · 2021-09-11 12:40:14Z

2

The filter condition is wrong, it will always return true in your case.
Array.filter() callback should return true for the items you want to keep.

You have to use AND && instead of OR ||.

this.state.messages.filter(msg => 
!msg._id.includes("receiver") && !msg._id.includes("blockedUsers")
)

Why it initially returned true? Because when the id is "receiver", it doesn't include "blockedUsers" and the other way around. You want to keep the element if it doesn't include "receiver" AND it also doesn't include "blockedUsers".

Here is a truth table to make it more clear, it should be true for the items you want to keep.

!includes("receiver")	!includes("blockedUsers")	OR	AND
false	false	false ✅	false ✅(skip item, it includes both strings)
false	true	true ❌	false ✅(skip item, it includes "blockedUsers")
true	false	true ❌	false ✅(skip item, it includes "receiver")
true	true	true ❌	true ✅(this is the only case where you want to keep the item, when it doesn't include either string)

edited Sep 11, 2021 at 12:40

answered Sep 11, 2021 at 12:29

XCS

28.3k28 gold badges105 silver badges155 bronze badges

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

3 Comments

Yosvel Quintero Over a year ago

Just: arr.filter(({ _id }) => !['receiver', 'blockedUsers'].includes(_id))

XCS Over a year ago

@YosvelQuinteroArguelles Yes, you can make the check a lot shorter and nicer-looking if needed. I tried to focus the answer more on why it is wrong, not on how it can be improved.

XCS Over a year ago

Have to note that ['receiver', 'blockedUsers'].includes(_id)) does a different thing than the includes function OP was using. The includes he was using was String.prototype.includes() which also returned true if the id was "receivers" or some other strings that contain the given needles. I am not sure if that's what OP needed or not, but it's important to note they return different values on various inputs.

Yosvel Quintero · Accepted Answer · 2021-09-11 14:20:58Z

0

You can combine Array.prototype.filter() with Array.prototype.includes():

const arr = [{ _id: 'receiver' },{ _id: 'blockedUsers' },{ _id: 'MjIzx3XA1mpcuzgDVZj', createdAt: 1631349363111, text: 'Ok', user: { name: 'Nikki' } },{ _id: 'M6fBsPludfYVjJXKYvwgxHRacYw1' },{ _id: ' MjG3hFAgcNweJWh9SF7', createdAt: 1631300277391, text: 'Again', user: { name: 'Chris', _id: 'tFhmw5oQoPhk8nF2sx5rE5BFqw93' }}]

const result = arr.filter(({ _id }) => !['receiver', 'blockedUsers'].includes(_id))

console.log(result)

edited Sep 11, 2021 at 14:20

answered Sep 11, 2021 at 14:10

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Collectives™ on Stack Overflow

React native filter array not working on string

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related