List.js

function List({ groupName, members = [] }) {
  const [collapsed, setCollapsed] = React.useState(members.length > 3)
  
  const constrainedMembers = collapsed ? members.slice(0, 3) : members
  
  function toggle() {
    setCollapsed((prevValue) => !prevValue)
  }
  
  return (
    <div>
      <h5>
        Group: <em>{groupName}</em>
      </h5>
      <ul>
        <p>Members</p>
        {constrainedMembers.map((member) => (
          <li key={member}>{member}</li>
        ))}
        {members.length > 3 && (
          <li className="expand">
            <button type="button" onClick={toggle}>
              Expand
            </button>
          </li>
        )}
      </ul>
    </div>
  )
}