Open
Description
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.