Last active
September 7, 2018 02:31
-
-
Save BalasubramaniM/dd8ac1d3cf15c899f54bc14b346af63f to your computer and use it in GitHub Desktop.
React: Use Array.filter() to Dynamically Filter an Array and Use Map - FreeCodeCamp
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(user => <li key={user.username}>{user.username}</li>); | |
return ( | |
<div> | |
<h1>Current Online Users: {usersOnline.length}</h1> | |
<ul> | |
{renderOnline} | |
</ul> | |
</div> | |
); | |
} | |
}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment