lasjorg
January 18, 2021, 10:07pm
8
I just added both methods to the one solution, I think it’s fine. I also added a link to the React docs.
I updated the next challenge as well to use the array element. I also switched the i to user and changed it to use the strict equality operator instead as well.
Edit: Here are the links to both hint articles just in case
Give Sibling Elements a Unique Key Attribute
Hints
Hint 1
It is just almost same as previous challenge . Just you need to add key attribute.
Solutions
Solution 1 (Click to Show/Hide) Add the key attribute to the <li> and give it a unique value.
Using the array element as the key:
const renderFrameworks = frontEndFrameworks.map((item) =>
<li key={item}>{item}</li>
);
Using the array index as the key (should be avoided):
const renderFrameworks = frontEndFrameworks.map((…
Use Array.filter() to Dynamically Filter an Array
Hints
Hint 1
Use .filter() to create a new array that only shows users online.
this.state.users.filter(user => user.online === true)
Hint 2
Use .map() from previous the previous exercise to list out the online users and give them a unique key.
usersOnline.map(user => <li key={user.username}>{user.username}</li>)
Solutions
Solution 1 (Click to Show/Hide) Both methods combined will first filter out the array, then list them individually.
clas…