Use Array.filter() to Dynamically Filter an Array. Where can I see the key attribute?

Tell us what’s happening:
Hi all,

I passed the challenge without a problem.
But I have a question that’s related to side topic of the challenge.

Basically in this challenge, I have to filter only active users and render each one of them as a list.
In this process, I have to assign unique key to each one of them. I was able to generate unique keys, assigned , and passed the test. However, I have no idea where I can check the actually generated value for the key attribute. I tried to see that through chrome developer’s tool but I have no idea. Can you let me know how I can see?

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((onlineUser)=>{
      return <li key={onlineUser + Math.random()}>{onlineUser.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 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36.

Link to the challenge:

In this case, what you did works, but may be overkill. The key is basically a unique index within this array or collection. Why not use the current element’s index within the array as its key? It is unique to the element in this array.

You can change the syntax of your map method to include the index.

And you might want to check the chrome store, look for React developer tools.

Hi @snowmonkey

Thanks for the comment. I updated my code to <li key={this.state.users.indexOf(onlineUser)}>

However, my question is still unsolved. My initial question was after lists are rendered where can I see the key attribute that I assigned. I cannot see that from the DOM. What I guess is this is JSX internal key so doesn’t get rendered into the browser …? If it is a normal attribute, I am supposed to see that next to <li> , right?

It’s used internally by React, it’s not for JSX

1 Like

Sort of why i suggest the react dev tools extension…