React key warning when children is returned from transforms

[jsphstls]

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: https://github.com/reactabular/reactabular/blob/bd94bbc30e22ba5e0ec5871b2bbf38112391972d/packages/reactabular-table/src/merge-props.js#L13-L18

transformedProps.children usage: https://github.com/reactabular/reactabular/blob/bd94bbc30e22ba5e0ec5871b2bbf38112391972d/packages/reactabular-table/src/header-row.js#L32-L45

[bebraw]

Hi,

Sorry for the delay (busy with work).

Can you set up a tiny test case (codesandbox, GitHub, or so)? A PR would be even better. :)

Maybe we have to add an extra check for this particular case in the code.

[jsphstls]

Repro: https://codesandbox.io/s/tender-wiles-3n6mh