CODEWITHSUNDEEP
reactjsbootstrap-4reactstrap
arnage
arnage

Reputation: 173

Problems with reactstrap carousel indicators

<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?

Upvotes: 4

Views: 2553

Answers (1)

thousight
thousight

Reputation: 1154

This is a reactstrap problem. The array you pass to has to be an object array with field 'src' in it, like this:

[{src: 'unique string', ...}]

Since <CarouselIndicators /> uses the field 'src' in the array item as the key for its items

Upvotes: 5

Related Questions