ListComponent.js

function ListComponent({
  label,
  items = [],
  collapsed,
  toggle,
  limit,
  total,
  renderListItem,
}) {
  return (
    <ul>
      <p>{label}</p>
      {items.map((member) =>
        renderListItem ? (
          <React.Fragment key={member}>{renderListItem({ collapsed, toggle, member )}</React.Fragment>
        ) : (
          <ListItem key={member}>{member}</ListItem>
        ),
      )}
      {total > limit && (
        <ListItem className='expand'>
          <button type='button' onClick={toggle}>
            {collapsed ? 'Expand' : 'Collapse'}
          </button>
        </ListItem>
      )}
    </ul>
  )
}