reactHuyakt2.js

export default class Carousel extends React.Component {
  state = {
    active: 0
  }

  onClick = (id) => {
    this.setState({ active: id });
  }

  render() {
    const { active } = this.state;
    const images = this.props.images;

    const generateSlider = images.map((element, index) => {
      const elementClass = {
        'carousel-item' : true,
        'active': index === active
      }
      return <div className={cn(elementClass)}>
      <img alt="" className="d-block w-100" src={element}></img>
    </div>;
    });

    const nextSlide = active + 1 < images.length ? active + 1 : 0;
    const prevSlide = active - 1 < 0 ? images.length - 1 : active - 1;

    const makePrevBtn = <a className="carousel-control-prev" href="#carousel" role="button" data-slide="prev" onClick={() => this.onClick(prevSlide)}>
    <span className="carousel-control-prev-icon"></span>
    <span className="sr-only">Previous</span>
  </a>
    const makeNextBtn =   <a className="carousel-control-next" href="#carousel" role="button" data-slide="next" onClick={() => this.onClick(nextSlide)}>
    <span className="carousel-control-next-icon"></span>
    <span className="sr-only">Next</span>
  </a>

    return <div id="carousel" className="carousel slide" data-ride="carousel">
  <div className="carousel-inner">
  {generateSlider}
  </div>
  {makePrevBtn}{makeNextBtn}
  </div>;
  }
}