Use Array.filter() to Dynamically Filter an Array issue

JavaScript
1

Tell us what’s happening:

help me to complete this task

Your code so far


class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      users: [
        {
          username: 'Jeff',
          online: true
        },
        {
          username: 'Alan',
          online: false
        },
        {
          username: 'Mary',
          online: true
        },
        {
          username: 'Jim',
          online: false
        },
        {
          username: 'Sara',
          online: true
        },
        {
          username: 'Laura',
          online: true
        }
      ]
    }
  }
  render() {
    const usersOnline = this.state.users.filter((online)=> online== true); // change code here
    const renderOnline = usersOnline.map((item, i) => {
  return <li key={i}>{item.username}</li>
});
    return (
       <div>
         <h1>Current Online Users:</h1>
         <ul>
           {renderOnline}
         </ul>
       </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/react/use-array-filter-to-dynamically-filter-an-array

2

I’m not js expert, but I think becasue of this line

the input arg online is not the property online, instead it’s a element of the argument.

Rename input arg online to something else like user, now you may access the online property and do the filtering

Keep goin on great work, happy programming

1 Like
3

As NULL_dev mentioned, the issue is this line here:
const usersOnline = this.state.users.filter((online)=> online== true);

This can be simplified and written as:
const usersOnline = this.state.users.filter(user => user.online);

You are filtering out each individual user, and checking if user.online which is a property in the user object is true, which can be expressed simply by saying user.online instead of user.online === true.

1 Like