Use Array.filter() to Dynamically Filter an Array Giving error

Tell us what’s happening:

Why it is giving error while it list username correctly.
Error: // running test
MyComponent should render li elements that contain the username of each online user.

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(user =>user.online); // change code here
    const renderOnline = usersOnline.map((user) => <li key={user.username}> {user.username} </li>) ; // change code here
    return (
       <div>
         <h1>Current Online Users:</h1>
         <ul>
           {renderOnline}
         </ul>
       </div>
    );
  }
};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36.

Link to the challenge:

    const renderOnline = usersOnline.map((user) => <li key={user.username}> {user.username} </li>) ; // change code here

You have unnecessary spaces before and after the {user.username} - those show up as spaces when you render and it is confusing the test. When I remove those spaces, it passes.

1 Like

Thanks . It helps me.