fix(UncontrolledCarousel): use item.key instead of item.src as key prop in CarouselItems

docs/lib/examples/CarouselUncontrolled.js

@@ -6,19 +6,22 @@ const items = [
     src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa1d%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa1d%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.921875%22%20y%3D%22218.3%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
     altText: 'Slide 1',
     caption: 'Slide 1',
-    header: 'Slide 1 Header'
+    header: 'Slide 1 Header',
+    key: '1'
   },
   {
     src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
     altText: 'Slide 2',
     caption: 'Slide 2',
-    header: 'Slide 2 Header'
+    header: 'Slide 2 Header',
+    key: '2'
   },
   {
     src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
     altText: 'Slide 3',
     caption: 'Slide 3',
-    header: 'Slide 3 Header'
+    header: 'Slide 3 Header',
+    key: '3'
   }
 ];
 

src/UncontrolledCarousel.js

@@ -5,6 +5,7 @@ import CarouselItem from './CarouselItem';
 import CarouselControl from './CarouselControl';
 import CarouselIndicators from './CarouselIndicators';
 import CarouselCaption from './CarouselCaption';
+import { warnOnce } from './utils';
 
 const propTypes = {
   items: PropTypes.array.isRequired,
@@ -60,11 +61,15 @@ class UncontrolledCarousel extends Component {
     const { activeIndex } = this.state;
 
     const slides = items.map((item) => {
+      const key = item.key || item.src;
+      if (!item.key) {
+        warnOnce('Item in UncontrolledCarousel is missing a key. Please provide a unique key to the item to avoid rendering react children with duplicate keys.');
+      }
       return (
         <CarouselItem
           onExiting={this.onExiting}
           onExited={this.onExited}
-          key={item.src}
+          key={key}
         >
           <img className="d-block w-100" src={item.src} alt={item.altText} />
           <CarouselCaption captionText={item.caption} captionHeader={item.header || item.caption} />

src/__tests__/UncontrolledCarousel.spec.js

@@ -3,12 +3,22 @@ import { shallow } from 'enzyme';
 import { Carousel, UncontrolledCarousel } from '../';
 
 const items = [
+  { src: '', altText: 'a', caption: 'caption 1', key: '1' },
+  { src: '', altText: 'b', caption: 'caption 2', key: '2' },
+  { src: '', altText: 'c', caption: 'caption 3', key: '3' }
+];
+
+const itemsWithoutKeys = [
   { src: '', altText: 'a', caption: 'caption 1' },
   { src: '', altText: 'b', caption: 'caption 2' },
   { src: '', altText: 'c', caption: 'caption 3' }
 ];
 
 describe('UncontrolledCarousel', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
   it('should be an Carousel', () => {
     const carousel = shallow(<UncontrolledCarousel items={items} />);
     expect(carousel.type()).toBe(Carousel);
@@ -134,4 +144,28 @@ describe('UncontrolledCarousel', () => {
     instance.onExited();
     expect(instance.animating).toBe(false);
   });
+
+  it('should render carousel items with provided key', () => {
+    const carousel = shallow(<UncontrolledCarousel items={items} indicators={false} />);
+    const carouselItem1 = carousel.childAt(0);
+    const carouselItem2 = carousel.childAt(1);
+    const carouselItem3 = carousel.childAt(2);
+    expect(carouselItem1.key()).toBe('1');
+    expect(carouselItem2.key()).toBe('2');
+    expect(carouselItem3.key()).toBe('3');
+  });
+
+  it('should warn user if item(s) with no key are provided', () => {
+    jest.spyOn(console, 'error');
+    const carousel = shallow(<UncontrolledCarousel items={itemsWithoutKeys} indicators={false} />);
+    const carouselItem1 = carousel.childAt(0);
+    const carouselItem2 = carousel.childAt(1);
+    const carouselItem3 = carousel.childAt(2);
+    expect(carouselItem1.key()).toBe('');
+    expect(carouselItem2.key()).toBe('');
+    expect(carouselItem3.key()).toBe('');
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(console.error.mock.calls[0][0]).toBe('Item in UncontrolledCarousel is missing a key. Please provide a unique key to the item to avoid rendering react children with duplicate keys.');
+  });
+
 });