<Carousel
activeIndex={this.state.activeIndex}
next={this.next}
slide
previous={this.previous}
>
<CarouselIndicators
items={this.items.map(item => item.id)}
activeIndex={this.state.activeIndex}
onClickHandler={this.goToIndex}
/>
{this.items.map(item => {
return (
<CarouselItem
onExiting={this.onExiting}
onExited={this.onExited}
key={item.id}
src={item.images.big}
altText={item.name}
/>
);
})}
<CarouselControl
direction="prev"
directionText="Назад"
onClickHandler={this.previous}
/>
<CarouselControl
direction="next"
directionText="Вперёд"
onClickHandler={this.next}
/>
</Carousel>
I have a bootstrap carousel component from this example reactstrap carousel. But when it renders I get error:
Encountered two children with the same key,
undefinedundefinedundefined. 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. in ol (created by CarouselIndicators)
But 'CarouselIndicators' items is unique values. Can anyone explain me where I was wrong?