issue with componentDidMount data not coming thorun unless i resize window or navigate to other page and come back

i have a redux thunk action fetch some data from 127 django server
and passing data to component that render swiper slides with images
action fire and redux state update correctly passing props to component but image not showing or swiper not read any slide unless i resize browser
I made example on codeanbox with the full code :https://codesandbox.io/s/p3qgs

try to refresh the sanbox browser perivew you will see a blank page with titles only now resize the preivew and you will see everything will work

Are there any thoughts if this is a problem with the component installation or a bug in swiper

Comments

[Ahmed Elabbasy]

update : this problem related to swiperjs

and the solution will be like that:

1 - assign swiper instance to React.CreateRef(null) : this.swiper = React.CreateRef(null)

2 - in componentDidUpdate() make a swiper update : this.swiper.current.update()
: this.swiper.current.updateSlides()

4 - use a arrow function syntax in swiper on functions to refer to the outer scope
this.swiper.current = new Swiper(".swiper-container", {
on: {
slideChange: (e) => {},
}
)}