CODEWITHSUNDEEP
javascriptcssreactjsreact-hooksreact-bootstrap
racketman
racketman

Reputation: 29

How to horizontalize react js component?

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>)

Upvotes: 0

Views: 51

Answers (2)

Harshit singh
Harshit singh

Reputation: 99

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>

Upvotes: 0

Dor Ben Itzhak
Dor Ben Itzhak

Reputation: 315

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>)

Upvotes: 1

Related Questions