title: Why am i getting undefined on my variable?
body: <p>I am practicing using axios in ReactJs where i have my App.js component which is in charge of fetching de data of my api using axios. This App.js renders a component that containt child components in it and one of the child component is my ImageList.js component where im rendering the list of images by mapping the array.</p>
  <p>App.js:</p>
  <pre><code>import React, { Component } from 'react'
  import SearchInput from './components/SearchInput'
  import axios from 'axios';
  import ImageList from './components/ImageList';
  
  export default class App extends Component {
  
    state = {images: []}
  
    onSearchSubmit = async(entry) =&gt; {
      const response = await axios.get(`https://pixabay.com/api/?key=29058457-42bf8a0bcd2bc1293e234b193&amp;q=${entry}&amp;image_type=photo`)
      console.log(response.data.hits)
      this.setState({images:response.data.hits});
    }
  
    render() {
      return (
        &lt;div className='ui container' style={{marginTop:'30px'}}&gt;
          &lt;SearchInput onSearchSubmit={this.onSearchSubmit}/&gt;
          We have {this.state.images.length} Images
          &lt;ImageList images={this.state.images}/&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  <p>ImageList.js:</p>
  <pre><code>import React from 'react'
  
  const ImageList = (props) =&gt; {
      const images = props.images.map((image) =&gt;{
          return &lt;img key={props.id} src={image.webFormatURL} alt=&quot;image&quot; /&gt;
      });
  
    return (
      &lt;div&gt;{images}&lt;/div&gt;
    )
  }
  
  export default ImageList
  </code></pre>
  <p>The error is suposed to be at line 10:11 at ImageList.js</p>
  <pre><code>images is undefined
  </code></pre>