This is my index.js file

Imports

```
import React from 'react';
import ReactDOM from 'react-dom';
import field from './images/field.jpg';
import forest from './images/forest.jpg';
import hills from './images/hills.jpg';
import lake from './images/lake.jpg';
import sunrise from './images/sunrise.jpg';

```

Image component

```
class Image extends React.Component {
  render() {
    return (
      <div className="img-container">
        <img src={this.props.images[this.props.index]} alt={this.props.images[this.props.index]} />
      </div>
    );
  }
}

```

This is reusable button component

```
class Button extends React.Component {
  render() {
    return (
      <button className="button" >{this.props.content}</button>
    );
  }
}

```

This is two sliders that use button component

```
class Slider extends React.Component {
  render() {
    return (
      <div className="slider">
        <Button content={"❮"} onClick={this.props.decreaseIndex}/>
        <Button content={"❯"} onClick={this.props.increaseIndex}/>
      </div>
    );
  }
}

```

This is the main carousel component that encapsulates all other components

```
class Carousel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      images: [field, forest, hills, lake, sunrise],
      current: 0
    }
  }
  changeIndex(what){
    if (what > 0){
      this.setState({
        current: (this.state.current+1)%5
      });
      return;
    }
    this.setState({
      current: (this.state.current-1)%5
    });
  }
  increaseIndex(){
    this.changeIndex(1);
  }
  decreaseIndex(){
    this.changeIndex(-1);
  }
  render() {
    return (
      <div className="carousel">
        <Image index={this.state.current} images={this.state.images}/>
        <Slider clickPrev={this.decreaseIndex} clickNext={this.increaseIndex}/>
      </div>
    );
  }
}

ReactDOM.render(<Carousel />, document.getElementById('root'));

```

I wanted to make a simple carousel using reactjs. It displays one image at a time, previous and next buttons change images. There are total 5 images to be displayed. On clicking 'next' or 'previous' button, images do not change as expected.

What is the exact mistake I am making here? I am new to react.