javascript - Cannot read property 'setState' of undefined

I'm trying to use flickr api to fetch public photos and create an image carousel with them but seems it does not want to get photos in the beginning. Since I'm new to React, it is really hard to figure out what I'm doing wrong here so any kinda help will be appreciated.. Thank you.

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import _ from 'lodash';

import Button from './components/button';

const urlArr = [];
const apiKey = "YOUR_API";
const userId = "YOUR_ID";
const url = `https://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=${apiKey}&user_id=${userId}&format=json&nojsoncallback=1`;


class App extends Component {
  constructor(props) {
    super(props);

    this.state = { urlArr: [] };

    axios.get(url)
    .then(function(photoData) {
      _.forEach(photoData.data.photos.photo, (photo) => {
        // this.setState({ urlArr: `https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg` });
        urlArr.push(`https://farm6.staticflickr.com//${photo.server}//${photo.id}_${photo.secret}_z.jpg`);
      });
      this.setState({ urlArr });
    });
  }

  render() {
    return (
      

        
    );
  }
};

ReactDOM.render(, document.querySelector('.container'));

Code above returns 'TypeError: Cannot read property 'setState' of undefined' and I'm not quite sure what that means..