fix(UncontrolledCarousel): use item.key instead of item.src as… (#1649)

* fix(UncontrolledCarousel): use item.key instead of item.src as key prop in CarouselItems See #1536 Resolves issue where if the UncontrolledCarousel contains CarouselItems with the same src, the following react error gets emitted: ``` Warning: Encountered two children with the same key, `https://xxx.png`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version. ``` * refactor(UncontrolledCarousel): remove warning message for undefined item key
reactstrap · Oct 7, 2019 · 5b9e758 · 5b9e758
1 parent ceb482b
commit 5b9e758
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 7 deletions.
diff --git a/docs/lib/examples/CarouselUncontrolled.js b/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'
   }
 ];
 

diff --git a/src/UncontrolledCarousel.js b/src/UncontrolledCarousel.js
@@ -60,11 +60,12 @@ class UncontrolledCarousel extends Component {
     const { activeIndex } = this.state;
 
     const slides = items.map((item) => {
+      const key = item.key || item.src;
       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} />

diff --git a/src/__tests__/UncontrolledCarousel.spec.js b/src/__tests__/UncontrolledCarousel.spec.js
@@ -3,9 +3,9 @@ import { shallow } from 'enzyme';
 import { Carousel, UncontrolledCarousel } from '../';
 
 const items = [
-  { src: '', altText: 'a', caption: 'caption 1' },
-  { src: '', altText: 'b', caption: 'caption 2' },
-  { src: '', altText: 'c', caption: 'caption 3' }
+  { src: '', altText: 'a', caption: 'caption 1', key: '1' },
+  { src: '', altText: 'b', caption: 'caption 2', key: '2' },
+  { src: '', altText: 'c', caption: 'caption 3', key: '3' }
 ];
 
 describe('UncontrolledCarousel', () => {
@@ -134,4 +134,14 @@ 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');
+  });
 });