How do I loop an array in React Native

Question

The RSS feed is parsed into an array, but the promblem is, the array doesn't loop, it only shows 1 item. How do I loop my Feeds array?

This is my code, I use react-native-rss-parser (https://www.npmjs.com/package/react-native-rss-parser):

class TNScreens extends React.Component { 
  state = {
    feed: [],
    title: []
  };

  componentDidMount() {
    return fetch("https://vnexpress.net/rss/tin-moi-nhat.rss")
      .then(response => response.text())
      .then(responseData => rssParser.parse(responseData))
      .then(rss => {
        for (let i = 0; i < rss.items.length; i++) {
          this.setState(prevState => ({
            ...prevState,
            feed: rss.items[i],
            title: rss.items[i].title
          }));
        }
      });
  }

  render() {
    const Feeds = ([
      {
        pic: {uri: ''},
        title: Object.keys(this.state.title).map(i => this.state.title[i])
      }
    ]);

    return (
      <SafeAreaView>
        <ScrollView>
          <Text h2 h2Style={styles.h2Style}>
            Trang nhất
          </Text>
          <Text h4 h4Style={styles.h4Style}>
            Cập nhật siêu nhanh
          </Text>
          <View>

            {Feeds.map(({ pic, title }) => (

              <Tile
                imageSrc={pic}
                height={200}
                activeOpacity={0.9}
                title={title}
                titleNumberOfLines={1}
                titleStyle={styles.title}
                featured
                key={title}
              />
            ))}
          </View>
        </ScrollView>
      </SafeAreaView>
    );
  }
}

export default TNScreen;

UPDATE

console.log(rss) result:

Object {
  "authors": Array [],
  "categories": Array [],
  "copyright": undefined,
  "description": "VnExpress RSS",
  "image": Object {
    "description": undefined,
    "height": undefined,
    "title": "Tin nhanh VnExpress - Đọc báo, tin tức online 24h",
    "url": "https://s.vnecdn.net/vnexpress/i/v20/logos/vne_logo_rss.png",
    "width": undefined,
  },
  "items": Array [],
  "itunes": Object {
    "authors": Array [],
    "block": undefined,
    "categories": Array [],
    "complete": undefined,
    "explicit": undefined,
    "image": undefined,
    "newFeedUrl": undefined,
    "owner": Object {
      "email": undefined,
      "name": undefined,
    },
    "subtitle": undefined,
    "summary": undefined,
  },
  "language": undefined,
  "lastPublished": "Sat, 30 Nov 2019 21:28:12 +0700",
  "lastUpdated": undefined,
  "links": Array [
    Object {
      "rel": "",
      "url": "https://vnexpress.net/rss/tin-moi-nhat.rss",
    },
  ],
  "title": "Tin mới nhất - VnExpress RSS",
  "type": "rss-v2",
}

Does this answer your question? How to loop through an array of data in React-native? — henriquehbr
– henriquehbr, Commented Nov 30, 2019 at 13:42

Zeeshan Ansari · Accepted Answer · 2019-11-30 09:56:57Z

0

There is a problem in your code in for loop you are just replacing the state with one value you are not copying the previous state. You will have to

this.setState(prevState => ({
        ...prevState,
        feed: [...prevState.feed, rss.items[i]],
        title: [...prevState, rss.items[i].title]
}));

But this is not the best practice because on every iteration your render will re-render so the best practice is

const feeds = rss.items.map(item => item);
const titles = rss.items.map(item => item.title);

this.setState({ feed: feeds, title:titles });

answered Nov 30, 2019 at 9:56

Zeeshan Ansari

11k3 gold badges29 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

quachhengtony Over a year ago

I tried both of your solution but none of them seem to work

quachhengtony Over a year ago

It doesn't render anything, just a blank screen

Zeeshan Ansari Over a year ago

Please console the .then(rss => { console.log(rss)

Zeeshan Ansari Over a year ago

items array is empty that why it's not rendering.

Lenoarod · Accepted Answer · 2019-11-30 14:35:16Z

0

your this.state.x only save one item, change the code to the following: and you should also change the get Data method, please do not setState in a loop

componentDidMount() {
    return fetch("https://vnexpress.net/rss/tin-moi-nhat.rss")
      .then(response => response.text())
      .then(responseData => rssParser.parse(responseData))
      .then(rss => {
        let copyRess = []
        let copyTitle = []
        for (let i = 0; i < rss.items.length; i++) {
          copyRess.push(rss.items[i]);
          copyTitle.push(rss.items[i].title)
        }
        this.setState(prevState => ({
            ...prevState,
            feed: copuRess,
            title: copyTitle
          }));
      });
  }

render() {
    const Feeds = []
    this.state.title.map(element => {
          Feeds.push({pic:"",title:element})
    })

    ....

edited Nov 30, 2019 at 14:35

answered Nov 30, 2019 at 9:41

Lenoarod

3,63116 silver badges25 bronze badges

3 Comments

quachhengtony Over a year ago

Adding return inside {Feeds.map(({ pic, title }) => ( give a syntax error

quachhengtony Over a year ago

It renders a blank screen, no feed

Lenoarod Over a year ago

@qhtn, I update the answer, and you data is no source, please check it firstly.

Collectives™ on Stack Overflow

How do I loop an array in React Native

2 Answers 2

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related