Skip to content
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

fix(Table): Keys warning when using renderBodyRow #1030

Closed
bzuker opened this issue Dec 14, 2016 · 2 comments
Closed

fix(Table): Keys warning when using renderBodyRow #1030

bzuker opened this issue Dec 14, 2016 · 2 comments

Comments

@bzuker
Copy link

bzuker commented Dec 14, 2016

Steps to Reproduce
Using the example from http://react.semantic-ui.com/collections/table#warning-shorthand.

If you don't specify a key, you get 'Warning: Each child in an array or iterator should have a unique "key" prop.'.

I believe it should be automatic when using the shorthand prop. It can be solved by adding

const renderBodyRow = ({ name, status, notes }, i) => ({
  key: i
  warning: !!(status && status.match('Requires Action')),
  cells: [
    {
      content: name || 'No name specified',
      key: i
    },
   {
    status
      ? { icon: 'attention', content: status }
      : 'Unknown',
      key: i+1
    },
    {
      notes
        ? { icon: 'attention', content: notes, warning: true }
        : 'None',
      key: i+2
    }
  ],
})

I've never done a PR before, sorry if this is easily solved!

@bzuker
Copy link
Author

bzuker commented Dec 14, 2016

#599 I think this was already issued

@bzuker bzuker closed this as completed Dec 14, 2016
@levithomason
Copy link
Member

Note using index in a key is an antipattern that you'll want to avoid:
https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318#.x50rgq3q2

That said, we do have a method for auto-generating unique keys if the shorthand props are also unique. We're adding tests to all examples to ensure they render with no errors. This work required auto-generating keys. You can see more in #645.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants