Creating a table in react using multiple component calls not working

I am trying to create a dynamic table of a sudoku app I am working on but I am unable to see why this code wouldnt work.
my base app passes in a ref hook and sends the 9×9 array to the Grid component

return(
      <Grid arr={sudokuBoard.current.board} />
    )

Then in my grid app, it makes a call to the RowComponent using the array.map function

export default function Grid(props){
    let sudokuArray = props.arr;
    return(
        <table>
            {sudokuArray.map((row, ind)=> {
                <RowComponent setkey={ind} rowval={row} />
                })
            }
        </table>
    )
}

Which then calls a tablecell generation function

export default function RowComponent(props){
    return(
        <tr key={props.setkey}>
        {props.rowval.map((item,ind) => {
            <TableItem keyval={item} value={item}/>
        })}
        </tr>
    )
}

And the table cell generating component looks like this

export default function TableItem(props){
    let tableValue = props.value
    console.log(tableValue)
    return(
        <td>{props.value}</td>
    )
}

Any pointers on what could be going wrong? The array gets passed into Grid just fine, but its in the chained calls where things stop working.

Thanks

>Solution :

In react/JSX you have to use ( ) around your code block inside the map, instead of { }. Like this:

{sudokuArray.map((row, ind)=> (
  <RowComponent setkey={ind} rowval={row} />
))}

{props.rowval.map((item,ind) => (
  <TableItem keyval={item} value={item}/>
))}

Difference between {} and () with .map with Reactjs this is an answer that explains why.