title: React .map is not a function
body: <p>I'm trying to learn React and I'm a beginner when it comes to Javascript. Right now I'm working on an app that is fetching data from Flickr's API. The problem is that when I try to use the map method on the props in the Main.js component I get an error saying "Uncaught TypeError: this.props.photos.map is not a function". After searching here on Stackoverflow I think the problem is that this.props are javascript objects and not an array. The problem is that I can't figure out how to make it an array. Can anyone explain what I'm doing wrong?</p>
  
  <p>My code:</p>
  
  <pre><code>class App extends Component {
  
    constructor() {
    super();
    this.state = {
  
    }
  }
  
  componentDidMount() {
  
  let apiKey = 'xxxxxxxxxxxxxxxxxx';
  let searchKeyword = 'nature';
  let url = `https://api.flickr.com/services/ 
             rest/?api_key=${apiKey}&amp;method=flickr.photos.
             search&amp;format=json&amp;nojsoncallback=1&amp;&amp;per_page=50
             &amp;page=1&amp;text=${searchKeyword}`;
  
  fetch(url)
    .then(response =&gt; response.json())
    .then(data =&gt; data.photos.photo.map((x) =&gt; {
  
      this.setState({
        farm: x.farm,
        id: x.id,
        secret: x.secret,
        server: x.server})
     // console.log(this.state)
    }))
   }
  
      render() {
        return (
          &lt;div className="App"&gt;
            &lt;Header /&gt;
            &lt;Main img={this.state.photos} /&gt;
            &lt;Navigation /&gt;
          &lt;/div&gt;
        );
      }
    }
  
    export default class Main extends Component {
  
    render() {
  
      return(
        &lt;main className="main"&gt;
          {console.log(this.props.photos)}
        &lt;/main&gt;
      )
    }
   }
  </code></pre>
  
  <p>Edit:
  Why is this.props.img undefined first?</p>
  
  <p><a href="https://i.stack.imgur.com/LNuVE.png" rel="noreferrer">Screen shot from console.log(this.props.img)</a></p>