Tengo un archivo data.js que contiene información sobre camisetas, sudaderas con capucha, fundas, etc. Tengo 5 objetos en cada matriz. Si llamo a cada matriz en mi HomeScreen.js, muestra todos los objetos que contiene la matriz.
¿Cómo hago para que cada matriz muestre un número específico de objetos en una página determinada? Por ejemplo, en la pantalla de inicio debería mostrar 2, pero en otra página debería mostrar los 5.
Aquí está mi tabla que llama a matrices data.js:
<span className="productstitle">Featured T-Shirts</span> <a href={`/category/tshirts`} className="browseall">All designs ></a> <table className="maintable"> {data.tshirts.map((product) => ( <Product key={product._id} product={product}></Product> ))} <p className='featuredtext'><span className="productstitle">Featured Hoodies</span> <a href={`/category/hoodies`} className="browseall">All designs ></a></p> {data.hoodies.map((product) => ( <Product key={product._id} product={product}></Product> ))} <p className='featuredtext'><span className="productstitle">Featured Phone Cases</span> <a href={`/category/cases`} className="browseall">All designs ></a></p> {data.cases.map((product) => ( <Product key={product._id} product={product}></Product> ))} <p className='featuredtext'><span className="productstitle">Featured Pins</span> <a href={`/category/stickers`} className="browseall">All designs ></a></p> {data.pins.map((product) => ( <Product key={product._id} product={product}></Product> ))} <p className='featuredtext'><span className="productstitle">Featured Posters</span> <a href={`/category/posters`} className="browseall">All designs ></a></p> {data.posters.map((product) => ( <Product key={product._id} product={product}></Product> ))} <p className='featuredtext'><span className="productstitle">Featured Mugs</span> <a href={`/category/mugs`} className="browseall">All designs ></a></p> {data.mugs.map((product) => ( <Product key={product._id} product={product}></Product> ))} </table>Puede intentar usar .slice() , que extrae una parte de la matriz.
Por ejemplo, para sudaderas con capucha, puedes hacer algo como:
{data.hoodies.slice(0, 2).map((product) => ( <Product key={product._id} product={product}></Product> ))}Si desea mostrar solo 2 elementos en la página de inicio, puede tener una declaración condicional en el cuerpo del componente (antes de la declaración de devolución para jsx).
Por ejemplo, puedes decir..
if (homepage) { data.hoodies = data.hoodies.slice(0, 2); }¿Es eso útil?
usar la función de corte
let data = { tshirts: [{ id: 1, name: 'red'},{ id: 2, name: 'green'},{ id: 3, name: 'blue'},{ id: 4, name: 'orange'},{ id: 5, name: 'yellow'}] } data.tshirts.slice(0,3).map((product) => console.log(product))