New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The key of column.title was missing in Table #9658

Closed
terence55 opened this Issue Mar 13, 2018 · 2 comments

Comments

Projects
None yet
3 participants
@terence55
Contributor

terence55 commented Mar 13, 2018

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

This comment has been minimized.

Member

yesmeck commented Mar 13, 2018

@terence55 Could you send a PR?

@terence55

This comment has been minimized.

Contributor

terence55 commented Mar 13, 2018

OK

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment