trying to mimic a carousel project found on github, but instead of using hardcoded images, i’d like to use dynamic images whose sources are stored in mongodb. so far, i can display exclusively the first image. the second and third images are not visible because the carousel is not functioning in three ways — the touch swipe is unresponsive, the navigation dots are unresponsive, and the sliding buttons are unresponsive. nevertheless console.log shows the second and third image elements are being built just like the first image. curious as to what the problem could be.

the way the original project is used is by wrapping the image elements with a carousel component:

<Carousel>
 <img src=...>
 <img src=...>
 <img src=...>
<Carousel/>

to mimic the carousel, i’ve roughly changed the above example to the following:

<Carousel>
 {renderMe()}
<Carousel/>

in addition, i added a method for building image elements using the source pulled from backend:

const renderMe = () => {
 let result = [];
 imgArr.forEach(img_src => {
  result.push(
   <img src={img_src} />
  )
 });
 return result;
}

lastly, i needed a method to extract the image source to an array:

useEffect(() => {
 let result = [];
 props.data.filter(item => item._id === (id)).map((item) => {
  item.media.map((i) => {
   result.push(i.image);
  })
 })
 setImgArr(result);
}, [props.data])

original github carousel project reference:
https://github.com/megazoid84/react-touch-mobile-carousel