Estoy haciendo un mapeo estándar como este; Uso slice(0,1) para obtener solo el primer elemento de la matriz; sin el corte, se mostrarán las 10 categorías en su propia tarjeta
<div ClassName="card-div"> {carsTypes.map((carsType, i) => ( <div key={i}> <div className="car-type-title"> <h6>{CarsType.title}</h6> // The following makes a pagination number. ie: 1/10 <p>{carsTypes.indexOf(carsType) + 1} / {carsTypes.length}</p> <button type="button">Next Car Type </button> </div> // This section map all the category names inside the card {strapi[carsType.id].map((cars, i) => { const brand = cars.brand return ( <p className="cars-card-type" key={i}> <Link to={carsType.getPath(brand)} className="btn-nav rounded-3" > {brand} </Link> </p> ) })} </div> ))}¿Cómo se puede crear un botón o un div que cuando los usuarios hacen clic en él; pasará el siguiente tipo de tarjeta (o categoría) del 1/10 al 2/10?
¡Fijado! No es necesario mapear toda la matriz.
const [showCars, setCars ] = useState(0) <div"> {carsType.map((carsType, i) => { if (i === showCategory) { return ( <div key={i}> <div> <h6>{carsType.title}</h6> <p>{carsTypes.indexOf(carsType) + 1} / {carsTypes.length}</p> </div> {strapi[carsType.id].map((category, i) => { const brand = category.brand return ( <p key={i}> <Link to={carsType.getPath(brand)}> {name} </Link> </p> ) })} <div> <button type="button" className="btn" onClick={() => setcars(showCars + 1)} > Next </button> </div> </div> )} })} </div> </div> ) }