I created a carousel in html, css and js. The below are the respective codes.

HTML:

```
<div class="doorHardwareTile" id="dh">
  <img class="mySlidesDH slide-to-right" src="images/Folder1/1.jpg?" alt="" />
  <img class="mySlidesDH slide-to-right" src="images/Folder1/2.jpg?" alt="" />
  <img class="mySlidesDH slide-to-right" src="images/Folder1/3.jpg?" alt="" />
  <img class="mySlidesDH slide-to-right" src="images/Folder1/4.jpg?" alt="" />
  <img class="mySlidesDH slide-to-right" src="images/Folder1/5.jpg?" alt="" />
  <img class="mySlidesDH slide-to-right" src="images/Folder1/6.jpg?" alt="" />

<div class="overlayDH">
    <img src="images/Folder1/0.png?" alt="" />
</div>

</div>

```

CSS:

```
 .slide-to-right {
  position: relative;
  animation: animateright 0.5s;
  }

  @keyframes animateright {
  from {
    right: -300px;
    opacity: 0;
   }
  to {
    right: 0;
    opacity: 1;
   }
  }

 .doorHardwareTile {
  display: flex;
  overflow: hidden;
  width: 560px;
  height: 373px;
  min-width: auto;
  min-height: auto;
  margin-bottom: 16px;
 }

.mySlidesDH {
 display: none;
 }

.overlayDH {
  position: absolute;
  width: 560px;
  height: 373px;

  z-index: 800;
  opacity: 0;
  transition: 0.5s ease;
 }

 .overlayDH img {
  object-fit: cover;
  width: 100%;
  height: 100%;

  align-content: center;
}

.doorHardwareTile:hover .overlayDH {
  opacity: 1;
}

```

JS:

```
$(function doorHardwareSS() {
  var myIndex = 0;
  carouselDH();

  function carouselDH() {
    var i;
    var totalElements = document.getElementsByClassName("mySlidesDH");
    for (i = 0; i < totalElements.length; i++) {
      totalElements[i].style.display = "none";
    }
    myIndex++;
    if (myIndex > totalElements.length) {
      myIndex = 1;
    }
    totalElements[myIndex - 1].style.display = "block";
    setTimeout(carouselDH, 5000);
  }
});

```

This worked perfectly in the html, css and js. 

However, when I tried to replicate the same in REACT. It throws error in the following line

```
totalElements[i].style.display = "none";

```

The error is "Uncaught TypeError: Cannot read property 'style' of undefined."

The images that I want in the carousel are retrieved from DB in a class based component.

I'm just a beginner in REACT. I would be thankful for any help in achiving the same result.

The below is the REACT code which is called in a class based component.

```
import React from "react";

const ImageSlide = props => {
  if (
    props.imagePath === undefined ||
    props.imagePath === null ||
    props.imagePath.length === 0
  )
    return null;

  return (
    <div className={props.styles}>
      {props.imagePath.map(image => {
        const path = props.svgsArray.find(str => str.indexOf(image.hash) > 1);
        // console.log(path);
        return (
          <img
            className="mySlidesDH slide-to-right"
            key={image.id}
            src={path}
            alt={props.styles}
          />
        );
      })}
      <div className={props.styles2}>
          <img src={require("./images/1_Door_hardware/0.png?")} alt="" />
      </div>
    </div>
  );
};

export default ImageSlide;

```

Please note that value doorHardwareTile is passed through `props.styles` and value overlayDH is passed through `props.styles2`