create table dynamically, with 3 columns on each row

Question

In my react app I want to make a "Cards" page, I want 3 cards on each row.

the relevant code looks like:

    static renderCards(cards) {
        return (
            <div>
                {cards.map((card, index) =>  
                    index % 3 == 0 ?
                        <div className="row" key={card.id}>
                            {MyComp.colData(card) }
                    </div> :
                         MyComp.colData(card) 
                )}

            </div>);
    }

where MyComp.colData returns a html of a single card

I tried to add the condition index % 3 == 0 then add a row wrapper else return a column data.

but now it creates a single column on each row

Answer 1

Creating A Row Then Appending 3 Columns in it. then Repeating the Same.

tell me if this what you want. i will explain more....

 let section = document.getElementById("container") let colCount = 3; let rowCount = 3; for (let i = 1; i <= rowCount; i++) { section.innerHTML += `<div id="row${i}"></div>`; for (let j = 1; j <= colCount; j++) { document.getElementById(`row${i}`).innerHTML += `<div id="column">i am a column</div>`; } }

 #row { outline: 1px solid red; } #column { background-color: red; } #column:nth-child(2) { background-color: pink; } #column:nth-child(3) { background-color: purple; }

 <section id="container"></section>