React app how to show only limited number of array items

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 &gt;</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 &gt;</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 &gt;</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 &gt;</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 &gt;</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 &gt;</a></p>

            {data.mugs.map((product) => (
                <Product key={product._id} product={product}></Product>
            ))}
        </table>

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?

Advertisement

Answer