Looping Using .map() and .filter()
class Users extends React.Component {
render() {
var friends = this.props.list.filter((user) =>
user.friend === true
);
var nonFriends = this.props.list.filter((user) =>
user.friend !== true
);
return (
<div>
<h1>Friends</h1>
<ul>
{friends.map((user) =>
<li>{user.name}</li>
)}
</ul>
<hr />
<h1> Non Friends </h1>
<ul>
{nonFriends.map((user) =>
<li>{user.name}</li>
)}
</ul>
</div>
)
}
}
ReactDOM.render(
<Users list={[
{ name: 'Tyler', friend: true },
{ name: 'Ryan', friend: true },
{ name: 'Michael', friend: false },
{ name: 'Mikenzi', friend: false },
{ name: 'Jessica', friend: true },
{ name: 'Dan', friend: false } ]}
/>,
document.getElementById('app')
);