Creating Table component using shorthand component causes "keys" warning

[georges-hatem]

React / ReactDOM version: 15.4.2
Semantic UI React version: 0.64.3

Warnings:

• Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of Table.
• Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of TableRow.

The Codepen below does specify a key for each dataRow, but not for headerRow values.
Could that be the issue? If so, under what key should the header values be placed? (i tried turning headerRow into a dictionary, but the rendering would not know how to pick up the header vals)

http://codepen.io/khorkhe/pen/ggWEmm

[levithomason]

The tableData has keys, however, the table cells do not:

cells: [
  name || 'No name specified',
  status ? {
    icon: 'attention',
    content: status
  } :
  'Unknown',
  notes ? {
    icon: 'attention',
    content: notes,
    warning: true
  } :
  'None',
],

The TableCell shorthand objects must have a key as well. When I add a key to those, the warnings go away.

[georges-hatem]

I see. I had tried this:

const renderBodyRow = ({ name, status, notes, key }) => ({
  cells: [ name, status, notes, key ],
})

when it really should have been this:

const renderBodyRow = ({ name, status, notes, key }) => ({
  cells: [ name, status, notes ],
  key
})

Sorry for the trouble

[levithomason]

No worries, thanks for using SUIR and reporting issues!