+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 3
(image gallery from array - reactivity events(setState))

2.Replace array of images with array objects of images and titles

         this.arrayImages = [
            //file and title are properties of object
            {file: 'additional/img/nature_1.jpg', title: 'title for nature_1'},
            {file: 'additional/img/nature_2.jpg', title: 'title for nature_2'},
            {file: 'additional/img/nature_3.jpg', title: 'title for nature_3'},
            {file: 'additional/img/nature_4.jpg', title: 'title for nature_4'},
         ];

3.Add new state title

        this.state = {
            file: null, 
            title: '',
        }

4.Add div element to render html and bind its contents with state title

                <div className="col text-center wrap">  
                    <img src={this.state.file} alt="image" />
                    <div className="title">{this.state.title}</div>
                </div>


5.Change state file and add new state title for setState in componentDidMount

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

6.Change state file adn add new state title for setState in setData method

    setData(i) {
       this.setState({
          file: this.arrayImages[i].file,  
          title: this.arrayImages[i].title,
       });
    }
class ReactDialog extends React.Component {

    constructor(props) {
        super(props);

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

         this.arrayImages = [
            {file: 'additional/img/nature_1.jpg', title: 'title for nature_1'},
            {file: 'additional/img/nature_2.jpg', title: 'title for nature_2'},
            {file: 'additional/img/nature_3.jpg', title: 'title for nature_3'},
            {file: 'additional/img/nature_4.jpg', title: 'title for nature_4'},
         ];

        this.i = 0; 

        this.state = {
            file: null, 
            title: '',
        }
    }

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

    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].file,  
          title: this.arrayImages[i].title,
      });
    }

    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 className="title">{this.state.title}</div>
                </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