I want to create some div dynamically, like in the image shown below. There could be 30+ div aligned like that, so hardcoding that will be painful. I want to do it with a loop. I tried many weird things that didn’t work. And the loop right now does not make sense, since I’m hardcoding everything in the loop.
How can I make it so that it is created in the loop, without repeating the code? So like a row having 4 or 5 cols. And also, if I change the dbRes
to be 20 or some other number, it should create the rows accordingly?
I have this code
const SearchRes = () => {
const dbRes = 10;
let res = null;
const user = {
uname: 'Piggy',
lang: 'English',
country: 'England',
level: 'Noob'
}
const divInfo =
<div style={{border: '2px solid red', width: '200px'}}>
<p>Name: {user.uname}</p>
<p>Language: {user.lang}</p>
<p>Count: {user.country}</p>
<p>Level: {user.level}</p>
</div>
for (let i = 0; i < dbRes; ++i) {
res =
<>
<Row>
<Col>
{divInfo}
</Col>
<Col>
{divInfo}
</Col>
<Col>
{divInfo}
</Col>
<Col>
{divInfo}
</Col>
<Col>
{divInfo}
</Col>
</Row>
</>
}
return (
<Container>
{res}
</Container>
)
}
I searched for some similar problems, and the closest I found was this: is there a way to create multiple divs using a loop in React
But it didn’t help me
Thanks in advance