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

Tell us what’s happening:
I am getting this error message below and can’t figure out how to fix it. I believe that I am writing the filter and map methods correctly. I believe that I using the key in each li correctly.

// running tests
Method “key” is only meant to be run on a single node. 0 found instead.
MyComponent should render li elements that contain the username of each online user.
MyComponent should return a div, an h1, and then an unordered list containing li elements for every user whose online status is set to true.
// tests completed
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);
    const renderOnline = usersOnline.map((item) => 
      {<li key={item.toString()}>{item}</li>})
    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/69.0.3497.92 Safari/537.36.

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

Look at what you are assigning to your keys. It should be a number, specifically an index. But you are assigning strings here.

Hint: 2nd parameter for your callback function inside your map method gives you access to index.

1 Like

The keys can be what ever is unique to the component. Since usernames are unique, the OP could specify a user’s username as the key. Your suggestion to use the array’s index is generally not recommended perReact documentation. See the following Medium article on the same subject.

@Klaudia There are two main reasons your code is failing the tests:

#1) As @shimphillip eludes to, item inside the map callback function is not the value you think it is. What datatype (Number, String, Array, Object, Boolean) is item inside the map callback?

#2) You are using arrow function function syntax and using { and } after the =>, so you must use an explicit return statement or your renderOnline variable will contain an array of undefined values.

You only can make use of implicit return when you do not include the { and } after => (see below).

const timesTwo= num => num * 2;
timesTwo(15); // returns 30

Otherwise, when using { and } after =>, you must explicitly return a value (see below).

const timesTwo= num => {
  return num * 2;
}
timesTwo(15); // returns 30
2 Likes
  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>
    );
  }
};

This is my new code and this is right.With your advice I pass the test thank you so much for your reply and your help @camperextraordinaire @shimphillip

Great,

glad you are able to pass this challenge :slight_smile:

What goes wrong using this:-

    const usersOnline = this.state.users.filter(user => user.online); 
    const renderOnline = usersOnline.map((item, index) => <li key={index}>{item}</li>);