title: React: calling a function in the onClick returns undefined
body: <p>I'm trying to write a code that shows a list of images, etc. based on this answer:
  <a href="https://stackoverflow.com/a/57635373/9478434">https://stackoverflow.com/a/57635373/9478434</a></p>
  
  <p>My code is:</p>
  
  <pre><code>class ImageGallery extends Component {
    constructor(props) {
      super(props);
      this.state = {
        photoIndex: 0,
        isOpen: false,
        imageList: [],
      };
    }
  
    getImages() {
      axios
        .get(IMAGE_LIST_URL, {})
        .then((response) =&gt; {
          const data = response.data;
          console.log(data);
          this.setState({ imageList: response.data });
        })
  
        .catch((error) =&gt; {
          setTimeout(() =&gt; {
            console.log(error.response.data.message);
          }, 200);
        });
    }
  
    componentDidMount() {
      this.getImages();
    }
    changePhotoIndex(imgIndex) {
      this.setState({ photoIndex: imgIndex, isOpen: true });
    }
  
    render() {
      const { photoIndex, isOpen, imageList } = this.state;
      const singleImage = imageList.map(function (img, imgIndex) {
        const imagePath = `http://localhost:8000/media/${img.filePath}`;
  
        console.log(imagePath);
        return (
          &lt;figure className="col-xl-3 col-sm-6"&gt;
            &lt;img
              src={imagePath}
              alt="Gallery"
              className="img-thumbnail"
              onClick={() =&gt; this.changePhotoIndex(imgIndex)}
            /&gt;
          &lt;/figure&gt;
        );
      });
      return &lt;div&gt;{singleImage}&lt;/div&gt;;
    }
  }
  </code></pre>
  
  <p>However while clicking on the image, I get a type error (t is undefined)  in the console regarding to the line <code>onClick={() =&gt; this.changePhotoIndex(imgIndex)</code> and the state of app does not change.</p>