Quiero que el botón sea invisible cuando haya menos de (5) botones de longitud visibles.
Está emitiendo 5 cada uno a través del estado visible .
en la página de detalles Pero me gustaría mostrar los botones invisibles si hay menos de 5 salidas.
Pero en mi código ahora, cuando hay menos de 5 botones, el botón se crea y el botón desaparece solo cuando se hace clic en el botón.
Al renderizar, quiero que los botones sean invisibles cuando hay menos de 5, pero ¿cómo debo escribir el código?
Quiero ocultar el botón cuando hay menos de 5 visibles
Funciona correctamente. Sin embargo, cuando hay menos de 5, el botón desaparece cuando se hace clic en el botón.
Sin embargo, si hay menos de 5, el botón desaparece cuando se hace clic en el botón. Pero, ¿y si, al renderizar la página, hay menos de 5 visibles? Quiero que el botón sea nulo al renderizar para que sea invisible incluso si no se hace clic en él. Como referencia, 5 visible se hace visible en
{All.displayText} has set useState(5)' para que 5 visible sean visibles. Y si está visible == 5 , se imprimen todas las longitudes. ProductDetail.allergies.length Cuando este valor es inferior a 5, creo que puede configurarlo como setState visible, pero no sé cómo hacerlo.
const [visible, setVisible] = useState(5); const [expanded, setexpanded ] = useState(false); const showMore = () => { if (visible === 5) { setVisible(ProductDetail.allergies.length); setexpanded(true); } else { setVisible(5); setexpanded(false); } } return ( {ProductDetail && ProductDetail.allergies?.length ? ProductDetail.allergies.slice(0, visible).map(All => ( <li key={All.id}> {All.displayText} </li> <ButtonBox> {visible >= 4 ? <button type="button" onClick={showMore}> {expanded ? (<div><span>close</span><img src={Vector190}/></div>) : (<div><span>more</span><img src={Vector189}/></div>) } </button> : null } </ButtonBox> )Lo resolví.
<ButtonBox> { visible < ProductDetail.allergies?.length ? <button type="button" onClick={showMore}> {expanded ? (<div><span>close</span><img src={Vector190}/></div>) : (<div><span>more</span><img src={Vector189}/></div>) } </button> : null } </ButtonBox>Lo que tienes que hacer es esto:
return ( {ProductDetail && ProductDetail.allergies?.length ? ProductDetail.allergies.slice(0, visible).map(All => ( <li key={All.id}> {All.displayText} </li> <ButtonBox> {visible < 5 // <- change the condition here ? <button type="button" onClick={showMore}> {expanded ? (<div><span>close</span><img src={Vector190}/></div>) : (<div><span>more</span><img src={Vector189}/></div>) } </button> : null } </ButtonBox> )