+380681072861(and telegram) 25onealexalex@gmail.com
used ready html code
the html-code is in the render block
click Edit source(pencil icon),
paste the code below into editor field,
click Save changes(check mark icon)
1.js - there is the code for Lesson 2
(event onClick(for example), bind events, reactivity events(setState))

2.Add arrayImages and counter to constructor

        this.arrayImages = [
            'additional/img/nature_1.jpg',
            'additional/img/nature_2.jpg',
            'additional/img/nature_3.jpg',
            'additional/img/nature_4.jpg',
        ];

        this.i = 0; 

3.Change value for setState in componentDidMount

    componentDidMount() {
       this.setState({
          file: this.arrayImages[0], 
       });
    }

4.Make new setData method(we'll use it for setState with both arrows) 

    setData(i) {
       this.setState({
          file: this.arrayImages[i],  
       });
    }

5.Change the methods changeImageLeft, changeImageRight(instead setState)

   changeImageLeft() {
      this.i--; //each click - counter decrement

      //first img file in the array(this.i == -1) - start from the ending
      if (this.i == -1) {
         this.i = this.arrayImages.length - 1; //counter reset to arrayImages.length - 1(the ending of the array)
      }

      //display(setAttribute src) previous(this.i--) img file from array
      this.setData(this.i);
   }  

   changeImageRight() {
      this.i++; //each click - counter increment

      //last img file in the array(this.i == this.arrayImages.length) - start from the beginning
      if (this.i == this.arrayImages.length) {
         this.i = 0; //counter reset to 0(the beginning of the array)
      }

      //display(setState) next(this.i++) img file from array
      this.setData(this.i);
   }
class ReactDialog extends React.Component {

    constructor(props) {
        super(props);

        this.changeImageLeft = this.changeImageLeft.bind(this);
        this.changeImageRight = this.changeImageRight.bind(this);

        this.arrayImages = [
            'additional/img/nature_1.jpg',
            'additional/img/nature_2.jpg',
            'additional/img/nature_3.jpg',
            'additional/img/nature_4.jpg',
        ];

        this.i = 0; 

        this.state = {
            file: null, 
        }
    }

    componentDidMount() {
       this.setState({
          file: this.arrayImages[0],
       });
    }

    changeImageLeft() {
      this.i--;

      if (this.i == -1) {
         this.i = this.arrayImages.length - 1;
      }

      this.setData(this.i);
    }  

    changeImageRight() {
      this.i++;

      if (this.i == this.arrayImages.length) {
         this.i = 0;
      }

      this.setData(this.i);
    }

    setData(i) {
      this.setState({
         file: this.arrayImages[i],
      });
    }

    render() {
        return (
            <div className="row container">
                <div className="col block-right text-center">
                    <i className="arrow left" onClick={this.changeImageLeft}></i>
                </div>     
                <div className="col text-center wrap">  
                    <img src={this.state.file} alt="image" />
                </div> 
                <div className="col block-left">
                    <i className="arrow right" onClick={this.changeImageRight}></i>
                </div> 
            </div>
        );    	
    }

}

const elem = document.querySelector('.contents') 

if (elem) {
   ReactDOM.render(<ReactDialog />, elem)
}
download the ready code