title: Mapping over sent props using .map react native
body: <p>i have two components one is called homeScreen the second is card i do fetch data in homeScreen i set it to state after i do send state through props to my card component . 
  Now my card components should generate 9 cards accoridng to the data i am sending through to it so i did map and i am getting this error
  TypeError: Cannot read property '0' of undefined.</p>
  
  <p>i tried to console.log props inside Card component and i could see data but for some reason the map isnt working </p>
  
  <p>Card.js</p>
  
  <pre><code>const Card = props =&gt; {
    Array.from({length: 9}).map((i, index) =&gt; {
  
  console.log(props);
    return (
      &lt;View style={{flex: 1}}&gt;
        &lt;Text style={{flex: 1, backgroundColor: 'red'}}&gt;
          {props.title[1] ? `${props.title[index]}` : 'Loading'}
        &lt;/Text&gt;
        &lt;Text style={{flex: 1, backgroundColor: 'blue'}}&gt;{props.rating[index]}&lt;/Text&gt;
      &lt;/View&gt;
    );
  });
  };
  export default Card;
  </code></pre>
  
  <p>homeScreen.js</p>
  
  <pre><code>export default class HomeScreen extends React.Component {
    state = {
      title: [],
      image: [],
      rating: [],
      isLoading: true,
    };
  
    componentDidMount() {
      this.getData();
    }
    titleSend = () =&gt; {
      if (!this.state.isLoading) {
        {
          Array.from({length: 9}).map((i, index) =&gt; {
            return this.state.title[index];
          });
        }
      }
    };
    imageSetter = () =&gt; {
      Array.from({length: 9}).map((i, keys) =&gt; {
        return (
          &lt;Image
            key={keys}
            style={{width: 50, height: 50, flex: 1}}
            source={{uri: this.state.image[keys]}}
          /&gt;
        );
      });
    };
  
    getData = () =&gt; {
      const requestUrls = Array.from({length: 9}).map(
        (_, idx) =&gt; `http://api.tvmaze.com/shows/${idx + 1}`,
      );
  
      const handleResponse = data =&gt; {
        const shows = data.map(show =&gt; show.data);
        this.setState({
          isLoading: false,
          title: shows.map(show =&gt; show.name),
          image: shows.map(show =&gt; show.image.medium),
          rating: shows.map(show =&gt; show.rating.average),
        });
        // console.log(this.state);
      };
      const handleError = error =&gt; {
        this.setState({
          isLoading: false,
        });
      };
  
      Promise.all(requestUrls.map(url =&gt; axios.get(url)))
        .then(handleResponse)
        .catch(handleError);
    };
  
    render() {
      const {isLoading, title, image, rating} = this.state;
      if (isLoading) {
        return &lt;ActivityIndicator size="large" color="#0000ff" /&gt;;
      }
      return (
        &lt;View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}&gt;
          &lt;ScrollView style={{flex: 1, backgroundColor: 'red'}}&gt;
            &lt;Card title={this.state.title} /&gt;
          &lt;/ScrollView&gt;
          &lt;Text&gt;here images&lt;/Text&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>