I have data.js file where information about t-shirts, hoodies, cases and etc. is contained. I have 5 objects in each array. If I call each array on my HomeScreen.js it shows all the objects that array contains.
How do I make each array show specific number of objects at a certain page? For example in the Home screen it should show 2, but on another page it should show all 5.
Here is my table that calls to data.js arrays:
<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>
Advertisement
Answer
You can try using .slice()
, which extracts a portion of the array.
For example, for hoodies, you can do something like:
{data.hoodies.slice(0, 2).map((product) => ( <Product key={product._id} product={product}></Product> ))}
If you want to show only 2 items in the homepage, you can have a conditional statement in the body of the component (before the return statement for the jsx).
For example, you can say..
if (homepage) { data.hoodies = data.hoodies.slice(0, 2); }
Is that helpful?