Carousel: Changing the number of items in the carousel crashes the component

[sf-adam-randall]

In CarouselIndicators.render() each panel index is looped through:

{[...Array(props.noOfIndicators).keys()].map((index) => {

later inside the loop, the code is trying to access props.items using that index, however that index is an index into the number of panels not items so this:

id = props.items[index].id;

causes a TypeError: Cannot read properties of undefined (reading 'id').

To duplicate:

  render() {
    let items = [
      {
        id: 0,
        heading: 'Zero',
      },
      {
        id: 1,
        heading: 'One'
      },
      {
        id: 2,
        heading: 'Two',
      },
      {
        id: 3,
        heading: 'Three'
      }
    ];
    if (this.state.filter) {
      items = [items[0]];
    }

    return (
      <div>
        <Button label="Toggle" onClick={() => this.setState({ filter: true }) } />
        <Carousel
            hasPreviousNextPanelNavigation
            items={items}
            itemsPerPanel={3}
        />
      </div>
    );
  }

When you click the button you will experience the error.

[welcome]

Thanks for opening your first issue! 👋
If you have found this library helpful, please star it. A maintainer will try to respond within 7 days. If you haven’t heard anything by then, please bump this thread.

[sf-adam-randall]

bump

[ashutosh887]

I would like to work on this Issue
Please assign to me and guide me once

[stale]

This issue has been automatically marked as stale, because it has not had recent activity. It will be closed if no further activity occurs. Maintainers are responsible for tech debt and project health. This is most likely a new components or component feature request. Please submit a pull request for or request feedback on this feature. Thank you.