[CarouselIndicators] Warning: Encountered two children with the same key

[LouisJS]

• components: CarouselIndicators
• reactstrap version ^6.1.0
• react version ^16.4.1
• bootstrap version ^4.1.0

What is happening?

When you pass your data to

<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />

It provoke

What should be happening?

CarouselIndicators shouldn't rely on dataset implementation (which is not using src)

Error message in console

Code

<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />

[walker-tx]

@LouisJS

CarouselIndicator keys are generated by concatenating the item values (belonging to keys src, caption, and altText) shown to be passed to the component in the docs through the items props... but there is another...

See here: CarouselIndicators.js

Check out the line 16 - it's the one that builds the key prop for each indicator. If a key field is included in each item object of your items array, then that will prevent you from having duplicate keys. So your object array should look something like this:

const items = [
  {
    'key': 0,
    'foo': 'bar',
  },
  {
    'key': 1,
    'foo': 'bahr',
  }
]

The resulting keys look something like 0undefinedundefined, but it works...

[LouisJS]

It's the same approach as src. Instead, i'll have to add a key properties to my data instead.
That doesn't solve the problem.

What if we could pass a chosen key to look for as props to CarouselIndicator. And then it will look for it instead of relying on the fact that the user will have a dataset which will match the one CarouselIndicator is waiting for.

Such as

const CarouselIndicators = (props) => {
  const { items, activeIndex, cssModule, onClickHandler, className, theKeyIdLikeToUse } = props;

 ...

 <li
     key={theKeyIdLikeToUse.length != 0 ? `${item[theKeyIdLikeToUse]` : ``${item.key || item.src}${item.caption}${item.altText}``}
     onClick={(e) => {
        e.preventDefault();
        onClickHandler(idx);
     }}
     className={indicatorClasses}
/>);

So the implementation would look like

<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} theKeyIdLikeToUse={'id'} />

[LouisJS]

Something like this. Making it optional by default

[walker-tx]

I think just concatenating whatever values are passed in the item objects would be less painful. No change needed to the docs, no logic required. Only stuff passed to the items prop that's unique.

Hopefully the PR is accepted, or at least we find a way to fix the issue if my solution isn't the way to go.