Is there a way of rendering React component iteratively?-CodePudding

This problem involves two components:

<Grid/>
<Cell/>

A Grid is made out of Cell's. I'm trying to display the cells that are in a list.

What I've tried

In Grid.js

//Create a list of cells
let cells = [
    <Cell />,
    <Cell />,
];

//Render in the return
<div>
    {
        cells.map((cell) => {
            <Cell />
        })
    }
</div>

In the Cell.js

//Just the instantiation with some sample text to print
import React from 'react'

const Cell = () => {
  return (
    <div>Cell</div>
  )
}

export default Cell

The Result I'm getting

Nothing is being displayed in the screen (nor errors in the console).

CodePudding user response：

<div>
    {
        cells.map((cell) => <Cell/>)
    }
</div>

<div>
    {
        cells.map((cell) => {
            return <Cell />
        })
    }
</div>