Estoy un poco fresco para reaccionar y usar ganchos de estado (todavía estoy aprendiendo). Quiero crear el botón Mostrar más/menos con el uso de ganchos Array y React. Encontré este código con el resultado exacto que quiero lograr: mostrar una parte de una matriz y luego mostrar el resto/volver al estado anterior.
La cuestión es que el código está escrito con el uso de componentes de clase. Ni siquiera los aprendí, useState es más reciente.
¿Cómo lograr algo como esto, pero con el uso del gancho de estado (¿useEffect?) Si es posible?
https://jsbin.com/wowaluwipu/1/edit?html,js,salida
class Application extends React.Component { constructor() { super() this.state = { cars: [ { "name" : "Audi", "country" : "Germany"}, { "name" : "BMW", "country" : "Germany" }, { "name" : "Chevrolet", "country" : "USA" }, { "name" : "Citroen", "country" : "France" }, { "name" : "Hyundai", "country" : "South Korea" }, { "name" : "Mercedes-Benz", "country" : "Germany" }, { "name" : "Renault", "country" : "France" }, { "name" : "Seat", "country" : "Spain" }, ], itemsToShow: 3, expanded: false } this.showMore = this.showMore.bind(this); } showMore() { this.state.itemsToShow === 3 ? ( this.setState({ itemsToShow: this.state.cars.length, expanded: true }) ) : ( this.setState({ itemsToShow: 3, expanded: false }) ) } render() { return <div className="container"> <h3>Click show more to see more data</h3> <div className="row"> <h3>List of Cars</h3> <ul> {this.state.cars.slice(0, this.state.itemsToShow).map((car, i) => <li key={i}>{car.name} - {car.country}</li> )} </ul> </div>De cualquier manera, el mío funciona tan bien como los demás. Sólo de una manera un poco diferente.
import React, { useState } from 'react' function Stacks() { const [itemsToShow, setItemsToShow] = useState(3); const cars = [ { "name" : "Audi", "country" : "Germany"}, { "name" : "BMW", "country" : "Germany" }, { "name" : "Chevrolet", "country" : "USA" }, { "name" : "Citroen", "country" : "France" }, { "name" : "Hyundai", "country" : "South Korea" }, { "name" : "Mercedes-Benz", "country" : "Germany" }, { "name" : "Renault", "country" : "France" }, { "name" : "Seat", "country" : "Spain" }, ]; const showmore = () => { setItemsToShow(cars.length) } const showless = () => { setItemsToShow(3) } return ( <div> {cars.slice(0, itemsToShow).map((car, index) => <li key={index}>{car.name} - {car.country} </li>)} {(itemsToShow === 3) ? <button onClick={showmore}>Show More</button>: <button onClick={showless}>Show Less</button>} </div> ) }Puede que no sea la forma eficiente, la única diferencia es que saqué el código en línea de mostrar más e hice una función separada mostrar menos que restablece el valor de estado original que es 3.
Tengo el mismo problema cuando estaba empezando en React que normalmente veo los componentes de clase en los tutoriales.
hola, tuve el mismo problema, pero gracias a la ayuda de otros, es mucho más claro (no puedo probar si funciona, pero debería ser así)
import { useState } from "react"; function App() { // const [state, setstate] = useState(initialState) // this is how it initially is const [data, setData] = useState({ cars: [ { name: "Audi", country: "Germany" }, { name: "BMW", country: "Germany" }, { name: "Chevrolet", country: "USA" }, { name: "Citroen", country: "France" }, { name: "Hyundai", country: "South Korea" }, { name: "Mercedes-Benz", country: "Germany" }, { name: "Renault", country: "France" }, { name: "Seat", country: "Spain" }, ], itemsToShow: 3, }); // i named it data youcan name it whatever suits you const showMore = () => { data.itemsToShow === 3 ? // ...data is a spread of the state, that means have all the data and change that // particular one, in that case "itemsToShow" setData({ ...data, itemsToShow: data.cars.length }) : setData({ itemsToShow: 3 }); }; return ( <div className="container"> <h3>Click show more to see more data</h3> <div className="row"> <h3>List of Cars</h3> <ul> {data.cars.slice(0, data.itemsToShow).map((car, i) => ( <li key={i}> {car.name} - {car.country} </li> ))} </ul> </div> // if the items you want to show are equal to the legth of your car list then hide the button {data.itemsToShow < data.cars.length && ( <button onClick={showMore}>Show more</button> )} </div> ); } export default App;generalmente te deshaces de ,"this", "this.state", y en lugar de "this.setState" pones tu gancho directamente como "setNewThings" o "SetCrazyStuff", o lo que sea...
Lo dominarás con más práctica, espero que te ayude