Rendering table column data in React

Question

I currently have a table display a couple of rows with different columns that I defined using array mapping. However, I want the last column or every row to have a button, but right now when I try to log text, it doesn't even show up. Why is this? The text I'm trying to log is where my code says <TableRowColumn> INSERT BUTTON HERE </TableRowColumn>

const row = (currentValue, index, header) => (
  <TableRow key={`t-${index}`}>
{
  header.map((headerName, index) => {
    return (
      <TableRowColumn key={`trc-${index}`}>
        {currentValue[headerName.prop]}
      </TableRowColumn>
      <TableRowColumn>
        INSERT BUTTON HERE
    </TableRowColumn>
  )
  })
}
  </TableRow>
);


export default ({ data, header }) =>
<Table>
<TableHeader>
  <TableRow>
    {
      header.map((headerName, index) =>  // single line arrow implied return
        <TableHeaderColumn key={`thc-${index}`}>
          {headerName.name}
        </TableHeaderColumn>
      )
    }
  </TableRow>
</TableHeader>
<TableBody>
  {data.map((currentValue, index) => row(currentValue, index, header))}
</TableBody>
</Table>

score 0 · Answer 1 · answered Dec 09 '17 at 21:13

In the map function inside row, you are attempting to return multiple elements (two <TableRowColumn>s) that are not wrapped in one single parent element. As discussed here, that is not a valid construct.

Instead, you could try returning an array of columns:

header.map((headerName, index) => {
  return ([
    <TableRowColumn key={`trc-${index}`}>
      {currentValue[headerName.prop]}
    </TableRowColumn>,
    <TableRowColumn>
      INSERT BUTTON HERE
    </TableRowColumn>
  ]);
});

Or, you could rewrite the logic so that each return statement only needs to return one element.

Rendering table column data in React

1 Answers1