Skip to content
New issue

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

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

Already on GitHub? # 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.

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

No branches or pull requests

2 participants