lodash react router eventKey

Question

I am trying to create a set of Links using lodash so they can be changed easily.

  {_.map(leftItems, item => (
    <Menu.Item>
      <Link {...item} eventKey={{ ...item.eventkey }} />{' '}
    </Menu.Item>
      ))}

And I am then bringing the items in with this JSON

const leftItems = [
  {
    content: 'Component1',
    key: 'component1',
    eventkey: 1,
    to: '/component1',
    className: 'left'
  },
  {
    content: 'Component2',
    key: 'component2',
    eventkey: 2,
    to: '/component2',
    className: 'left'
  },
  {
    content: 'Component3',
    key: 'component3',
    eventkey: 3,
    to: '/component3',
    className: 'left'
  },
  {
    content: 'Component4',
    key: 'component4',
    eventkey: 4,
    to: '/component4',
    className: 'left'
  }
];

I am having issues getting rid of either of these errors:

index.js:2178 Warning: Each child in an array or iterator should have a unique "key" prop.

index.js:2178 Warning: React does not recognize the eventKey prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase eventkey instead. If you accidentally passed it from a parent component, remove it from the DOM element.

I have tried this as well: key={item.eventkey} and still get that it isn't a unique key. — Stephen Phillips, Jun 15 '18 at 17:33

score 0 · Answer 1 · answered Jun 15 '18 at 18:12

0

You need to put the unique key on <Menu.Item>, i.e.:

{_.map(leftItems, item => (
    <Menu.Item key={item.eventkey}>
      <Link {...item} />{' '}
    </Menu.Item>
))}

eventKey={{ ...item.eventkey }} is unnecessary as it is implied by your spread operator {...item}

answered Jun 15 '18 at 18:12

greendemiurge

509
3
11

Just solved it as you typed it. Thanks for the help :) {item.content} – Stephen Phillips Jun 15 '18 at 18:15
If anyone else faces this issue please see this post for more help- https://stackoverflow.com/questions/37651660/react-each-child-in-an-array-or-iterator-should-have-a-unique-key-prop – Stephen Phillips Jun 15 '18 at 18:16

lodash react router eventKey

1 Answers1