React key warning when children is returned from transforms #373
Description
Hey all,
I really like reactabular's API. So far I have used it to create tables with expandable rows, selectable rows, and a scrollable table without fixed column widths. Everything has been smooth until I started using transforms to make accessible sort controls in column headers. Specifically, I am seeing a warning when I start using transforms with children:
Warning: Each child in a list should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.
in button (created by HeaderRow)
in th (created by HeaderRow)
in tr (created by HeaderRow)
in HeaderRow (created by Header)
in thead (created by Header)
in Header (at Table.js:59) // my custom <Table>
in table (created by Provider)
Part of columns:
header: {
transforms: [() => ({
children: (
<button>
{label}
<Something
key={1} // adding a key to one item silences the warning
/>
</button>
)
})
]
}
Button has two children. The error does not occur when there is one child. The children are not in a list.
I "think' the problem is due to transformedProps.children being the result of a list creation.
List creation:
reactabular/packages/reactabular-table/src/merge-props.js
Lines 13 to 18 in bd94bbc
transformedProps.children usage:
reactabular/packages/reactabular-table/src/header-row.js
Lines 32 to 45 in bd94bbc