Carousel Backup

SlideHeader.js

import React, { Component } from "react";
import { CSSTransitionGroup } from 'react-transition-group';
import './carousel.css';

export const images = [
  'images/grill.jpg',
  'images/grill2.jpg',
  'images/grill3.jpg'
];

class SlideHeader extends Component {
  constructor(props) {
    super(props);
    this.state = {
      slideshow: props.slide,
      slideIndex: 0
    };
    this.currentIndex = 0;
  }

  componentDidMount() {
    this.goTo();
  }

  componentDidUpdate() {
    this.timeout = setTimeout(() => {
      this.goTo();
    }, 4000);
  }

  componentWillUnmount() {
    clearInterval(this.timeout);
  }

  goTo() {
    let index = 0;
    index = this.currentIndex + 1;
    this.currentIndex = index >= images.length ? 0 : index;

    this.setState({
      slideIndex: this.currentIndex,
      slideshow: images[this.currentIndex]
    });
  }

  render() {
    return (<SlideItems src={this.state.slideshow} index={this.state.slideIndex}/>) ;
  }
}

function SlideItems(props) {
  return (
    <div className="slide-header">
      <div className="overlay-header">
        <h1>Grillber lorem ipsum</h1>
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
      	<button>Order Now</button>
      </div>
      <CSSTransitionGroup
          transitionName="swap"
          transitionEnterTimeout={4000}
          transitionLeave={false}>
   	    <img src={props.src} alt="grill" key={'img_ ' + props.index} />
    	</CSSTransitionGroup>
    </div>
  );
}

SlideHeader.defaultProps = {
  images: images
};

export default SlideHeader;