fix(Table): fix react key error on sibling cells with same string content

docs/src/examples/collections/Table/Variations/TableExampleTableData.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Table } from 'semantic-ui-react'
+
+const headerRow = ['Name', 'Status', 'Notes']
+const renderBodyRow = ({ name, status, notes }, index) => ({
+  key: index,
+  cells: [name || { key: 0 }, status || { key: 1 }, notes || { key: 2 }],
+})
+
+const tableData = [
+  { name: undefined, status: 'Repeat', notes: 'Repeat' },
+  { name: 'Jimmy', status: 'Requires Action', notes: undefined },
+  { name: 'Jamie', status: undefined, notes: 'Hostile' },
+  { name: 'Jill', status: undefined, notes: undefined },
+]
+
+const TableExampleWithTableData = () => (
+  <Table
+    tableData={tableData}
+    headerRow={headerRow}
+    renderBodyRow={renderBodyRow}
+  />
+)
+
+export default TableExampleWithTableData

docs/src/examples/collections/Table/Variations/index.js

@@ -159,6 +159,18 @@ const Variations = () => (
       examplePath='collections/Table/Variations/TableExampleSmall'
     />
     <ComponentExample examplePath='collections/Table/Variations/TableExampleLarge' />
+
+    <ComponentExample
+      title='TableData'
+      description='A table can receive a JSON object to create body rows.'
+      examplePath='collections/Table/Variations/TableExampleTableData'
+    >
+      <Message info>
+        Using the <code>tableData</code> attribute requires also to define the
+        Tables
+        <code>renderBodyRow</code> attribute.
+      </Message>
+    </ComponentExample>
   </ExampleSection>
 )
 

src/collections/Table/TableRow.js

@@ -59,7 +59,17 @@ function TableRow(props) {
 
   return (
     <ElementType {...rest} className={classes}>
-      {_.map(cells, (cell) => TableCell.create(cell, { defaultProps: { as: cellAs } }))}
+      {_.map(cells, (cell, idx) => {
+        const defaultProps = { as: cellAs }
+
+        // generate a default react key for any string content created cells by this HOC
+        // required due the fact that without this, sibling cells with same content will result in React Same Key Error
+        if (typeof cell === 'string') {
+          defaultProps.key = `${idx}-${cell.toLocaleLowerCase().replace(' ', '-')}`
+        }
+
+        return TableCell.create(cell, { defaultProps })
+      })}
     </ElementType>
   )
 }

test/specs/collections/Table/Table-test.js

@@ -97,6 +97,13 @@ describe('Table', () => {
       { name: 'Jill', lastName: undefined, status: undefined, notes: undefined },
     ]
 
+    const tableDataWithSameCellContentInSiblingCells = [
+      { name: undefined, status: 'repeat', notes: 'repeat' },
+      { name: 'Jimmy', status: 'Requires Action', notes: undefined },
+      { name: 'Jamie', status: undefined, notes: 'Hostile' },
+      { name: 'Jill', status: undefined, notes: undefined },
+    ]
+
     const renderBodyRowWithSpan = ({ name, lastName, status, notes }, index) => ({
       key: index,
       cells: [
@@ -170,5 +177,13 @@ describe('Table', () => {
       tfoot.find('tr').should.have.lengthOf(1)
       tfoot.find('tr').find('td').should.have.lengthOf(footerRow.length)
     })
+
+    it('renders table data with same string content in sibling cells', () => {
+      wrapperMount({
+        headerRow,
+        renderBodyRow,
+        tableData: tableDataWithSameCellContentInSiblingCells,
+      })
+    })
   })
 })