0

I am trying to display five card components in one row. My goal is to change the no of card elements dynamically for different screen-size. To achieve this I passed a condition in JSX. Here is a sample code

import React from 'react';

function Layout () {
    const data = [
        {
            id: 1,
            title: "Test-1"
        },
        {
            id: 2,
            title: "Test-2"
        },
        {
            id: 3,
            title: "Test-3"
        },
        {
            id: 4,
            title: "Test-4"
        },
        {
            id: 5,
            title: "Test-5"
        },
        {
            id: 6,
            title: "Test-6"
        },
        {
            id: 7,
            title: "Test-7"
        },

          //more data is here
    ]

    const Card = () => {
        const cssCard = {
            width: "175px",
            height: "225px",
            padding: "15px",
            cursor: "pointer",
            borderRadius: "3px",
            border: "1px solid black"
        }
        return(
            <>
                {
                    data.map((item, index) => 
                        <ul className='card' key={index} style={cssCard}>
                            <li> {item.id} </li>
                            <li> {item.title} </li>
                        </ul>
                    )
                }
            </>
        );

    }

    const cssCardHolder = {
        display: "flex",
        flexWrap: (((data.length % 5) === 0 || data.length === 0) ? "wrap" : "nowrap"),
        gap: "1.5rem 1.5rem"
    }

    return (
            <section className="card--holder" style={cssCardHolder}>
                <Card />
            </section>
    );
}

export default Layout;

Unfortunately flexWrap: (((data.length % 5) === 0 || data.length === 0) ? "wrap" : "nowrap") flexWrap property is not working. Yes, it is possible to display by changing the "card--holder" with some width. But I am looking for something to change by applying some conditions. Appreciate any better suggestion/approach.

sparrow
  • 1
  • 2
  • I'm not sure what you're going for. The code that you've posted correctly adds the flex and flex-wrap property to the cardholders and is working as intended. – Hassoo Aug 13 '23 at 14:07
  • yes, it adds both `flex` and `flex-wrap` property. But somehow the ternary condition is not working. My goal is `card--holder` class will have `width: 100%` but will only display five card component in one row even there is enough space for new card component, this is why I limit within the condition `(data.length % 5) === 0` but somehow it is not working. I added add more sample data in my code for reference. – sparrow Aug 13 '23 at 16:55
  • If I am understanding correctly, you want there to be a maximum of 5 cards per row. Setting `flex and flex-wrap` will not do anything in your current code since it will only wrap if there is not enough space for a new card. Therefore, you can potentially have more than 5 cards in a row. You will need to adjust the width manually, This similar [question](https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row) might be of interest. – Hassoo Aug 13 '23 at 18:12
  • Does this answer your question? [Flexbox: 4 items per row](https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row) – Hassoo Aug 13 '23 at 18:14
  • yes perfect. I am trying to achieve maximum 5 card components in every row even if there is enough space for the next card. The length of the dataset may be varied. And I want to control the no of card components in each row from another script file which is based on the screen size i.e for mobile n=3, tablet n=5, desktop n= 7 so on. It is possible to achieve this just by setting the width of ´card--holder` class like `width: 80%; margin: 0 auto` for different screen size. But looking for a good solution too. – sparrow Aug 14 '23 at 06:58

0 Answers0