0

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

User
  • 53
  • 5
  • 2
    Does this answer your question? [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions) – David Nov 21 '22 at 21:07
  • 2
    It's essentially a typo. The callback function to `.map()` doesn't return anything. – David Nov 21 '22 at 21:07
  • @David yep! that was it, I was missing the return. Thanks! – User Nov 21 '22 at 21:28

1 Answers1

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

or

<div>
    {
        cells.map((cell) => {
            return <Cell />
        })
    }
</div>
Aakash Rathee
  • 523
  • 3
  • 17
  • That was it! I'm very new to react so I missed the return . I got confused as I already had one outside (the main return) – User Nov 21 '22 at 21:27