Tengo esta expresión jsx que representa un máximo de 5 elementos de una matriz usando la función de mapa. ¿Cómo puedo hacer que el resto de los elementos se muestren al hacer clic en el botón? La lista de elementos de la matriz se desconoce porque proviene de una API, por lo que a veces puede ser de 10 o 15 elementos, etc.
const Second = ({container}) => { return( <div> {container?.slice(0, 5).map((container) => ( <h3>{container}</h3> ))} <button type="button" class="btn btn-primary">Primary</button> </div> ) }puede declarar una variable de estado booleana para determinar si desea mostrar todos los elementos o solo los primeros cinco, esta variable se actualizará cuando haga clic en el botón:
function Second({container = []}) { const [showAll, setShowAll] = useState(false); function handleClick() { setShowAll(prevShowAll => !prevShowAll); } const items = showAll ? container : container.slice(0, 5); return( <div> {items.map(item => <h3>{item}</h3>)} <button type="button" class="btn btn-primary" onClick={handleClick}> {showAll ? "Show first five items" : "Show all items"} </button> </div> ) }Puede tener un estado que determine eso y luego establecer el estado en true al hacer clic en el botón: Algo como esto
const Second = ({container}) => { const [showMore, setShowMore] = useState(false); return( <div> {container?.slice(0, 5).map((container) => ( <h3>{container}</h3> ))} {showMore && container?.slice(5).map((container) => ( <h3>{container}</h3> ))} //this would show the remaining values <button type="button" class="btn btn-primary" onClick={() => setShowMore(true)}>Primary</button> </div> ) }