I've just started using the react-elastic-carousel package and am running into an issue on page load. Everything loads up on page load/refresh, but when I click the arrow to move the carousel, the items aren't rotating. Only upon resizing the window do the products re-format correctly, and then I can continue to use the buttons normally from then on. I've commented out all of my CSS thinking that it was maybe clashing with the package's CSS but it did nothing. I know that this package uses Resize Observer, but am not sure if that would be the issue or not. I've attached my code for the component that's using the carousel as well as a link to the Github of the react-elastic-carousel package. Any direction or advice is appreciated!
import React from 'react';
import axios from 'axios';
import RelatedProducts from './RelatedProducts.jsx';
import OutfitList from './OutfitList.jsx';
import Carousel from "react-elastic-carousel";
//Custom styles for carousel//
const breakPoints = [
{ width: 1, itemsToShow: 1 },
{ width: 550, itemsToShow: 2 },
{ width: 768, itemsToShow: 3 },
{ width: 1200, itemsToShow: 4 },
];
class RelatedProductsList extends React.Component {
constructor(props) {
super(props);
this.state = {
products: []
}
this.getRelated = this.getRelated.bind(this);
}
componentDidUpdate(prevProps) {
if (prevProps.mainProduct.id !== this.props.mainProduct.id) {
this.getRelated()
}
}
getRelated() {
axios.get(`/api/${this.props.mainProduct.id}`)
.then((results) => {
this.setState({
products: results.data
})})
.catch((err) => console.log(err));
};
render() {
return (
<div>
<Carousel breakPoints={breakPoints}>
{this.state.products.map((id, index) => {
return (
<RelatedProducts productId={id} key={index} mainProduct={this.props.mainProduct} updateCurrentProduct={this.props.updateCurrentProduct}/>
)
})}
</Carousel>
</div>
);
}
};
export default RelatedProductsList;