Filtering A List With React

Question

Hmm, I don\'t see my omission, but I get a blank page with a console error saying:

Users.js:9 Uncaught TypeError: Cannot read property \'filter\' of undefined
           


        

Answer 1

I would do something like this instead which is a little more straightforward

{this.props.list.map(function (person, i) {
  {return person.friend
    ?(
{person.name}
)
    : null
  }
})}

1. You are iterating over the list itself, not an item in the list which is why this.props.list.friend.filter didn't work.
2. I would use map because you are not actually filtering the lists in this case. If you wanted to you could filter the list beforehand into friends and non friends and map over those items which would actually be more straightforward for another engineer to see.
3. React wants keys in the markup for the iterated items created. That is how React creates the relationships between components in the state tree.