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

Okay, looks like "Users.js" should be:

import React from 'react';

class Users extends React.Component {
  render() {
    let friends = this.props.list.filter( function (user) {
      return user.friend === true
    });

    let nonFriends = this.props.list.filter( function (user) {
      return user.friend !== true
    });

    return (
      

        
Friends:
        

          {friends.map(function (user) {
            return 
{user.name}
          })}
        
        
Non Friends:
        

          {nonFriends.map(function (user) {
            return 
{user.name}
          })}
        
      
    );
  }
}

export default Users;

Or even this:

import React from 'react';

class Users extends React.Component {
  render() {
    return (
      

        
Friends:
        

          {this.props.list.filter(function (user) { // filter first for friends
            return user.friend === true // returns a new array
          }).map(function (user) {  // map the new array to list items
            return 
{user.name}
 // don't forget unique key for each item
          })}
        

        


        
Non Friends:
        

          {this.props.list.filter(function (user) { // filter first for non-friends
            return user.friend !== true // returns a new array
          }).map(function (user) {  //map the new array to list items
            return 
{user.name}
 // don't forget unique key for each item
          })}
        
      
    );
  }
}

export default Users;