How to display a given number of records from an array into a ListGroup?

I'm using React-Bootstrap to create a dashboard. It has a ListGroup that displays user details taken from the users array.

I need to know how to display only a given number of ListGroup.Items (eg: 5 list items out of 10) instead of displaying all the records from the array.

For now, my ListGroup displays the entire array of user records.

Users.js

export const Users = () => {

  const users = [
    {
      id: "1",
      img: "https://cdn-icons-png.flaticon.com/512/3135/3135715.png",
      firstname: "Rangana",
      lastname: "Cruise",
      organization: "Company",
      role: "Admin",
    },
    ...
    {
      id: "10",
      img: "https://cdn-icons-png.flaticon.com/512/3135/3135715.png",
      firstname: "James",
      lastname: "Bond",
      organization: "Company",
      role: "Admin",
    },
  ];

  return (
    <div className="bg">
      <Row className="overview">
        ...
        <Col sm={5}>

          <ListGroup>
            <div className="list-group-title">
              <h3>Users ({users.length})</h3>
              <h6>Overview of Users</h6>
            </div>

            <UserList users={users} />

            <ListGroup.Item>
              <Button>View All</Button>
            </ListGroup.Item>

          </ListGroup>
        </Col>
      </Row>
    </div>
  );
};

UserList.js

export const UserList = (props) => {

  const renderUserList = props.users.map((user) => {

    for (let i = 0; i < 5; i++) {
      return (
        <ListGroup.Item className="list-group-item">
          <Col sm={1}>
            <Image
              fluid
              roundedCircle
              src={user.img}
              alt="user image"
              className="img-user"
            />
          </Col>
          <Col sm={11} className="user-details">
            <span className="list-item-name">
              {user.firstname} {user.lastname}
            </span>
            <br />
            <span className="list-item-type">{user.role}</span>
          </Col>
        </ListGroup.Item>
      );
    }
  });

  return <div>{renderUserList}</div>;
};

Via Active questions tagged javascript - Stack Overflow https://ift.tt/x9p2GDY