Cacher is the code snippet organizer for pro developers

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')
);