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:

reactabular/packages/reactabular-table/src/merge-props.js

Lines 13 to 18 in bd94bbc

	return mergeWith(mergeWith({}, firstProps), ...restProps, (a, b, key) => {
	if (key === 'children') {
	// Children have to be merged in reverse order for Reactabular
	// logic to work.
	return { ...b, ...a };
	}

transformedProps.children usage:

reactabular/packages/reactabular-table/src/header-row.js

Lines 32 to 45 in bd94bbc

	return React.createElement(
	renderers.cell,
	{
	key: `${columnIndex}-header`,
	...mergeProps(
	props,
	header && header.props,
	transformedProps
	)
	},
	transformedProps.children || evaluateFormatters(formatters)(label, extraParameters)
	);
	})
	)

[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