警告：列表中的每个孩子都应该有一个唯一的“键”道具来切换

Question

Please tell me how to add a unique "key" prop for each child in a list. It is a functional component in react:

<List component="nav">
  {bundlesData.map((bundleItem) => {
    switch (bundleItem) {
      case 'page':
        return pagesNavLink

      case 'menu':
        return (
          <MenuNavLink
            handleClick={handleClick}
            isOpened={isNavLinkOpened}
          />
        )

      default:
        return bundleItem
    }
  })}
</List>

Answer 1

You can use the index to identify each bundleItem :

<List component='nav'>
  {bundlesData.map((bundleItem, index) => {
    switch (bundleItem) {
      case 'page':
        return <div key={index}>{pagesNavLink}</div>;

      case 'menu':
        return (
          <MenuNavLink
            key={index}
            handleClick={handleClick}
            isOpened={isNavLinkOpened}
          />
        );

      default:
        return <div key={index}>{bundleItem}</div>;
    }
  })}
</List>;

Answer 2

One thing you can do with a map function is it can take a second parameter which keeps track of the index. You can then use that index parameter on the list items as a key prop.

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map