Estoy mostrando una lista de usuarios con avatares horizontalmente, cuando hay muchos de ellos o la pantalla es pequeña, aparece una nueva fila. Ahora, si aparece la tercera fila, quiero ocultarla y mostrar el botón Mostrar más y solo deberían estar visibles 2 filas.
¿Puede alguien ayudarme con eso? Sé cómo lograrlo solo con texto, pero aquí el componente de usuario incluye un avatar, un rol y un nombre de usuario, por eso no puedo usar line_height y calcular una cantidad de filas.
<ul>{data.map(item => <li style={{display: "inline-block"}}><DisplayUser user={item}/></li>)}</ul>Componente de usuario
<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>Puede usar state.num en lugar de line-height para guardar la cantidad de elementos que representará y aumentarla cuando se hace clic en el botón.
Función de aumento (componente de función)
const [num, setNum] = useState(0) const increaseNum = () => { setNum(num + 2) }Prestar
data.map((item, index) => { if (index > num) { return false } // end loop return ( <UserData> ... </UserData> ) })