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>
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?
use the slice function
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))