text: import React from "react";
  import PropTypes from "prop-types";
  import styles from "./styles.scss";
  import Loading from "components/Loading";
  import UserDisplay from "components/UserDisplay";
  import Ionicon from "react-ionicons";
  
  const UserList = props => {
    console.log("UserList no stateless");
    console.log(props);
    return (
      <div className={styles.container}>
        <div className={styles.box}>
          <header className={styles.header}>
            <h4 className={styles.title}>{props.title}</h4>
            <span onClick={props.closeLikes}>
              <Ionicon icon="md-close" fontSize="20px" color="black" />
            </span>
          </header>
          <div className={styles.content}>
            {props.loading ? <Loading /> : <RenderUsers list={props.userList} />}
          </div>
        </div>
      </div>
    );
  };
  
  const RenderUsers = props =>
    props.list.map(user => (
      <UserDisplay horizontal={true} key={user.id} user={user} />
    ));
  
  UserList.propTypes = {
    title: PropTypes.string.isRequired,
    loading: PropTypes.bool.isRequired,
    users: PropTypes.array,
    closeLikes: PropTypes.func.isRequired,
    userList: PropTypes.array
  };
  
  export default UserList;
  