Creating a table in react using multiple component calls not working

Question

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 9x9 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

Travis · Accepted Answer · 2022-04-12 03:43:01Z

1

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.

edited Apr 12, 2022 at 3:43

answered Apr 12, 2022 at 3:38

Travis

1091 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

imbes Over a year ago

How did I not know this in all my time learning react recently... thanks so much. Will mark this as an answer when its off cooldown.

Travis Over a year ago

@imbes np! I just edited my answer with a post explaining it.

Collectives™ on Stack Overflow

Creating a table in react using multiple component calls not working

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related