react: how to filter an array of objects in props

Question

I have props with following data

test1: abc
id: 1
myArray: Array(3)
0: {a:abc, b:cde, aid: 1}
1: {e:age, f:ade, aid: 2}
2: {t:are, h:had, aid: 1}

I want to filter props and update array to have only the values that match id and aid

So the props should look like below:

test1: abc
id: 1
myArray: Array(3)
0: {a:abc, b:cde, aid: 1}
2: {t:are, h:had, aid: 1}

How can i do that?

I was gonna post a filter implementation but there is one detail, props are inmutable... is that correct? you want to change the props of the current component? — Facundo Larrosa
– Facundo Larrosa, Commented Jun 4, 2018 at 0:03

caulitomaz · Accepted Answer · 2018-06-04 00:13:50Z

2

You can use the filter Array method

let myArray = [{a:"abc", b:"cde", aid: 1},
               {e:"age", f:"ade", aid: 2},
               {t:"are", h:"had", aid: 1}]

const result = myArray.filter(item => item.aid === 1)

console.log(result)

But take in consideration that props are immutable.

If you wish to change this prop permanently you will have to update it in the parent component.

edited Jun 4, 2018 at 0:13

answered Jun 4, 2018 at 0:07

caulitomaz

2,40116 silver badges20 bronze badges

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

Comments

Rohith Murali · Accepted Answer · 2018-06-04 01:48:00Z

1

You will get the filtered data by using,

const filteredData = this.props.myArray.filter(item => item.aid === 1)

However props is only readable. You will have to eigther dispatch or update parent component to provide new/filtered data as props.

answered Jun 4, 2018 at 1:48

Rohith Murali

5,6692 gold badges27 silver badges28 bronze badges

2 Comments

tbs Over a year ago

I am new to React. Could useState be used to update the state according the filtered list? Say, if I'm filtering 3 lists out of the prop variable, should I have 3 separate states? Thanks!

tbs Over a year ago

Found it! Filtering and creating new variables out of props should involve useStates that are called upon useEffects.

Jee Mok · Accepted Answer · 2018-06-04 00:09:01Z

0

you can use Array.filter()

// match both a AND aid
const result = myArray.filter(obj => (obj.a === test1 && obj.aid === id);
// match either a OR aid
const result = myArray.filter(obj => (obj.a === test1 || obj.aid === id);

answered Jun 4, 2018 at 0:09

Jee Mok

6,6068 gold badges54 silver badges83 bronze badges

Collectives™ on Stack Overflow

react: how to filter an array of objects in props

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related