How to provide API data to react-native snap carousal

Question

I am working on a React native news app, I have to parse data from REST API and provide that data to snap carousal component.

snap-carousal has sliderEntry.js which expects title, subtitle, illustration in the form of key value pairs array.

SliderEntry.js

import React, { Component, PropTypes } from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import styles from '../styles/SliderEntry.style';

export default class SliderEntry extends Component {

static propTypes = {
    title: PropTypes.string.isRequired,
    subtitle: PropTypes.string,
    illustration: PropTypes.string,
    even: PropTypes.bool
};

render () {
    const { title, subtitle, illustration, even } = this.props;

    const uppercaseTitle = title ? (
        <Text style={[styles.title, even ? styles.titleEven : {}]}   numberOfLines={2}>{ title.toUpperCase() }</Text>
    ) : false;

    return (
        <TouchableOpacity
          activeOpacity={0.7}
          style={styles.slideInnerContainer}
          onPress={() => { alert(`You've clicked '${title}'`); }}
          >
            <View style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}>
                <Image
                  source={{ uri: illustration }}
                  style={styles.image}
                />
                <View style={[styles.radiusMask, even ? styles.radiusMaskEven : {}]} />
            </View>
            <View style={[styles.textContainer, even ? styles.textContainerEven : {}]}>
                { uppercaseTitle }
                <Text style={[styles.subtitle, even ? styles.subtitleEven : {}]} numberOfLines={2}>{ subtitle }</Text>
            </View>
        </TouchableOpacity>
    );
}
}

My api returns data in a different format, I have to set the state variable which is an array in the format sliderEntry.js expects, so I have created new array and extracted title, subtitle, illustration from api response and set the new array as state variable entries.

import React from "react";
import Carousel from 'react-native-snap-carousel';
import { sliderWidth, itemWidth } from './styles/SliderEntry.style';
import SliderEntry from './components/SliderEntry';
import styles from './styles/index.style';
import { ENTRIES1, ENTRIES2 } from './static/entries';

export default class HomeScreen extends React.Component {

getSlides (entries) {
    if (!entries) {
        return false;
    }

    return entries.map((entry, index) => {
        return (
            <SliderEntry
              key={`carousel-entry-${index}`}
              even={(index + 1) % 2 === 0}
              {...entry}
            />
        );
    });
}

constructor(props) {
super(props);
this.state = {entries: ENTRIES1,entries2:[]};
}

componentDidMount() {
this.load();
}

async load(){
  try { 
    let response = await fetch('http://newstrack.com/api/get_category_posts?id=263');
     let responseJson = await response.json(); 


var responseModified =[
{
    title: 'jhbfb ombop',
    subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
    illustration: 'http://i.imgur.com/UYiroysl.jpg'
},
{
    title: 'Earlier this morning, NYC',
    subtitle: 'Lorem ipsum dolor sit amet',
    illustration: 'http://i.imgur.com/UPrs1EWl.jpg'
},
{
    title: 'White Pocket Sunset',
    subtitle: 'Lorem ipsum dolor sit amet et nuncat ',
    illustration: 'http://i.imgur.com/MABUbpDl.jpg'
},
{
    title: 'Acrocorinth, Greece',
    subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur',
    illustration: 'http://i.imgur.com/KZsmUi2l.jpg'
},
{
    title: 'The lone tree, majestic landscape of New Zealand',
    subtitle: 'Lorem ipsum dolor sit amet',
    illustration: 'http://i.imgur.com/2nCt3Sbl.jpg'
},
{
    title: 'Middle Earth, Germany',
    subtitle: 'Lorem ipsum dolor sit amet',
    illustration: 'http://i.imgur.com/lceHsT6l.jpg'
}
];

for (var i = 0; i <8; i++) {
  responseModified [i].title=responseJson.posts[i].title;
  responseModified [i].subtitle=responseJson.posts[i].excerpt;
  responseModified[i].illustration=
        responseJson.posts[i].attachments[0].url;
}


     this.setState({

      entries: responseJson.posts,
      entries2: responseModified

    }, function() {
      // do something with new state


    });
   } catch(error) 
   { 
    console.error(error);
  }
}



render() {
return (
<Carousel
          sliderWidth={sliderWidth}
          itemWidth={itemWidth}
          inactiveSlideScale={1}
          inactiveSlideOpacity={1}
          enableMomentum={true}
          autoplay={true}
          autoplayDelay={500}
          autoplayInterval={2500}
          containerCustomStyle={styles.slider}
          contentContainerCustomStyle={styles.sliderContainer}
          showsHorizontalScrollIndicator={false}
          snapOnAndroid={true}
          removeClippedSubviews={false}
          >
              { this.getSlides(this.state.entries2) }
          </Carousel>
);
}
}

Api structure:

{
 "posts":[
      {
       "title": "We are not looking forward to forming new party",
       "excerpt": "<p>Lucknow: Samajwadi Party patriarch Mulayam",
       "attachments": [
             {
              "url": "http:\/\/abc.com\/wp-content.jpg",
             }
          ]
     },
     {
       "title": "We are not looking forward to forming new party",
       "excerpt": "<p>Lucknow: Samajwadi Party patriarch Mulayam",
       "attachments": [
             {
              "url": "http:\/\/abc.com\/wp-content.jpg",
             }
          ]
     },
     {
       "title": "We are not looking forward to forming new party",
       "excerpt": "<p>Lucknow: Samajwadi Party patriarch Mulayam",
       "attachments": [
             {
              "url": "http:\/\/abc.com\/wp-content.jpg",
             }
          ]
     },
     {...},
     ...  
 ]
}

I am trying to get the title, excerpt, url and assign to title.subtitle, illustration. Is this the right way to do it? I am getting error:

undefined is not an object(evaluating 'responseModified[i].title=responseJson.posts[i].title')

Answer 1

To modify array you can just create blank array first. like

var arrayModified = [] and after that you can insert value in array like this

var array = responseJson.posts;
for (let i = 0; i < array.length; i++) {
    if (arrayModified[0] === []) {
        arrayModified.pop();
    } else {
        arrURI.push({
            title: array[i].title,
            subtitle: array[i].imageName,
            illustration: array[i].imageData,
        });
    }
}

According to me this is the right way, and may be you won't get error of undifiend after this.