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: