I'm displaying a list of users with avatars horizontally, when there are many of them or the display is small a new row appears. Now if the third row appears I want to hide it and display show more button and only 2 rows should be visible.
Can someone help me with that? I know how to achieve it with only text but here the user component includes an avatar, role, and username because of that I can't use a line_height and calculate a number of rows.
<ul>{data.map(item => <li style={{display: "inline-block"}}><DisplayUser user={item}/></li>)}</ul>
UserComponent
<UserData>
{user.avatarUrl && (
<Avatar
sx={{ marginRight: "10px", width: 42, height: 42 }}
src={user.avatarUrl}
/>
)}
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "flex-start",
}}
>
<Typography variant="body1" sx={{ lineHeight: "inherit" }} noWrap>
{user.userName}
</Typography>
<Typography
variant="caption"
sx={{ color: "var(--text-secondary)" }}
noWrap
>
{user.role}
</Typography>
</Box>
</UserData>
You can use state.num instead of line-height to save the number of items you will render, and increase it when the button is cilcked.
Increase function (Function component)
const [num, setNum] = useState(0)
const increaseNum = () => {
setNum(num + 2)
}
Render
data.map((item, index) => {
if (index > num) { return false } // end loop
return (
<UserData>
...
</UserData>
)
})