Mapping over sent props using .map react native

Question

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.

i tried to console.log props inside Card component and i could see data but for some reason the map isnt working

Card.js

const Card = props => {
  Array.from({length: 9}).map((i, index) => {

console.log(props);
  return (
    <View style={{flex: 1}}>
      <Text style={{flex: 1, backgroundColor: 'red'}}>
        {props.title[1] ? `${props.title[index]}` : 'Loading'}
      </Text>
      <Text style={{flex: 1, backgroundColor: 'blue'}}>{props.rating[index]}</Text>
    </View>
  );
});
};
export default Card;

homeScreen.js

export default class HomeScreen extends React.Component {
  state = {
    title: [],
    image: [],
    rating: [],
    isLoading: true,
  };

  componentDidMount() {
    this.getData();
  }
  titleSend = () => {
    if (!this.state.isLoading) {
      {
        Array.from({length: 9}).map((i, index) => {
          return this.state.title[index];
        });
      }
    }
  };
  imageSetter = () => {
    Array.from({length: 9}).map((i, keys) => {
      return (
        <Image
          key={keys}
          style={{width: 50, height: 50, flex: 1}}
          source={{uri: this.state.image[keys]}}
        />
      );
    });
  };

  getData = () => {
    const requestUrls = Array.from({length: 9}).map(
      (_, idx) => `http://api.tvmaze.com/shows/${idx + 1}`,
    );

    const handleResponse = data => {
      const shows = data.map(show => show.data);
      this.setState({
        isLoading: false,
        title: shows.map(show => show.name),
        image: shows.map(show => show.image.medium),
        rating: shows.map(show => show.rating.average),
      });
      // console.log(this.state);
    };
    const handleError = error => {
      this.setState({
        isLoading: false,
      });
    };

    Promise.all(requestUrls.map(url => axios.get(url)))
      .then(handleResponse)
      .catch(handleError);
  };

  render() {
    const {isLoading, title, image, rating} = this.state;
    if (isLoading) {
      return <ActivityIndicator size="large" color="#0000ff" />;
    }
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <ScrollView style={{flex: 1, backgroundColor: 'red'}}>
          <Card title={this.state.title} />
        </ScrollView>
        <Text>here images</Text>
      </View>
    );
  }
}

Answer 1

None of your functions/methods using Array.from are returning a value.

For example your Card component:

const Card = props => {
  // note addition of `return` statement
  return Array.from({length: 9}).map((i, index) => {

console.log(props);
  return (
    <View style={{flex: 1}}>
      <Text style={{flex: 1, backgroundColor: 'red'}}>
        {props.title[1] ? `${props.title[index]}` : 'Loading'}
      </Text>
      <Text style={{flex: 1, backgroundColor: 'blue'}}>{props.rating[index]}</Text>
    </View>
  );
});
};
export default Card;

The titleSend and imageSetter methods have a similar issue.

The index error is because you're not passing an rating prop to the Card component but you're accessing props.rating[0] , props.rating[1] , etc.

return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <ScrollView style={{flex: 1, backgroundColor: 'red'}}>
          // missing `rating` prop
          <Card title={this.state.title} />
        </ScrollView>
        <Text>here images</Text>
      </View>
    );