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