The key of column.title was missing in Table

[terence55]

Version

3.3.0

Environment

OSX El Capitan, Chrome 64

Reproduction link

https://codesandbox.io/s/3rzr5xr8zm

Steps to reproduce

Define custom header with react-resizable, then I got the warnings from React: Each child in an array or iterator should have a unique "key" prop.

It was caused by the implementation of function renderColumnsDropdown in Table.

renderColumnsDropdown(columns: ColumnProps<T>[], locale: TableLocale) {
...
column.title = (
        <span>
          {column.title}
          {sortButton}
          {filterDropdown}
        </span>
      );
}

It would drop the key even I defined that in column.title. It was ignored in the new span. react-resizable will wrap children in an array so every child requires key prop.

react-resizable

return cloneElement(children, {
      ...p,
      className,
      children: [
        children.props.children,
        <DraggableCore
          {...draggableOpts}
          key="resizableHandle"
          onStop={this.resizeHandler('onResizeStop')}
          onStart={this.resizeHandler('onResizeStart')}
          onDrag={this.resizeHandler('onResize')}
          >
          <span className="react-resizable-handle" />
        </DraggableCore>
      ]
    });

What is expected?

No warnings.

What is actually happening?

React warnings for missing key

[yesmeck]

@terence55 Could you send a PR?

[terence55]

OK