Me preguntaba cómo medir el número de filas en un contenedor. Cuando muestra más de 3 filas de li, quiero que el resto de los elementos de li en las filas de abajo se oculten con un botón para mostrar más/menos.

Hasta ahora he medido las filas con la altura del contenedor. "Cuando la altura del contenedor ul es superior a 128 px (equivalente a 3 filas), ocultar los elementos li por encima de esa altura" es la lógica, pero esto no funciona al ocultar los elementos li según el siguiente código.

¿Podría ayudarme a refactorizar el código para que funcione o proporcionar un método alternativo para medir la cantidad de filas?

¡Gracias por adelantado!

rebeca

 export function ListOfItems(): JSX.Element { const [isOpen, setIsOpen] = useState(false); const [height, setHeight] = useState(0); const ref = useRef(null); useEffect(() => { setHeight(ref.current?.clientHeight); }); console.log(height); return ( <ListSection title={`List of Items`}> <ul className={styles.wrapper} ref={ref}> {list?.map((listItem, height) => ( <li key={id} className={classNames({ [styles.hidden]: height > 128 && !isOpen, })} > <RoundedPill label={label} /> </li> ))} </ul> <p onClick={() => setIsOpen(!isOpen)}>{isOpen ? "Show less" : "Show more"}</p> </ListSection> ); }