How to horizontalize react js component?

Question

I created app to map all card components on a page. But components are shown vertically. I need to show 3 components per row. How can I show it like that? Here is my code.

 const[item, setItem] = useState([]);

function addItem(newItem){ //This addItem Part is working.
    setItem(prevItems =>{
        return [...prevItems, newItem]
    });
}

return(<div className="container">
        <div className="row">
        <div className="col-lg-4" style={{cursor: "pointer"}}>
            <AddCard />
        </div>

        <div style={{cursor: "pointer"}}>

            {item.map((items, index)=>{
                return(
                    <div className="col-lg-4" >
                        <ItemCard
                            key={index}
                            id={index}
                            title={items.title}
                            description={items.description}
                        />
                    </div>
                )
        })}
        </div>

        </div>)

This sounds like a question about CSS, not really about React. I see some classes in your code like col-lg-4 – I assume this comes from some CSS framework you are using. It may be necessary for us to know which framework that is – for example, Bootstrap or Semantic UI. — Rory O'Kane
– Rory O'Kane, Commented May 29, 2021 at 5:34

Dor Ben Itzhak · Accepted Answer · 2021-05-29 05:33:33Z

1

You can use display:"flex" on the container

 const[item, setItem] = useState([]);

function addItem(newItem){ //This addItem Part is working.
    setItem(prevItems =>{
        return [...prevItems, newItem]
    });
}

return(<div className="container">
        <div className="row">
        <div className="col-lg-4" style={{cursor: "pointer"}}>
            <AddCard />
        </div>

        <div style={{cursor: "pointer", display:"flex"}}>

            {item.map((items, index)=>{
                return(
                    <div className="col-lg-4" >
                        <ItemCard
                            key={index}
                            id={index}
                            title={items.title}
                            description={items.description}
                        />
                    </div>
                )
        })}
        </div>

        </div>)

answered May 29, 2021 at 5:33

Dor Ben Itzhak

3152 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

racketman Over a year ago

I need to show 3 components per row. But If I use 'flex' It will show all components as a line.

Dor Ben Itzhak Over a year ago

So you should try: display: "grid", grid-template-columns: "1fr 1fr 1fr"

Dor Ben Itzhak Over a year ago

the syntax in react is different, try add class to the container and add this with css: .some-container-class{ display: grid; grid-template-columns: 1fr 1fr 1fr; } By the way you can change the '1fr' to any size you want like '300px'

Harshit singh · Accepted Answer · 2021-05-29 05:47:59Z

0

Use flexboxes, as React lets you create components, so we can style them just like HTML elements with flexboxes.

Example :

.flexbox-container {
    display: flex;
    flex-direction: row;
}

<div class="flexbox-container">
    <div>Element1</div>
    <div>Element2</div>
    <div>Element3</div>
</div>

answered May 29, 2021 at 5:47

Harshit singh

993 bronze badges

Collectives™ on Stack Overflow

How to horizontalize react js component?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related