CODEWITHSUNDEEP
javascriptreactjsasynchronousrss
Dave.Q
Dave.Q

Reputation: 399

RSS parser using React fails on page refresh

Summary

I'm using rss-parser in React to parse my RSS Feed.

Problem

When I first start up my development server, the data from the feed loads fine and my JSX is rendered. The issue comes in when I refresh the page.

The error I receive is:

"feed.items is undefined"

This only happens when I refresh the page, otherwise, it works on the initial render.

Component

Here's my RSS Feed component

import React, {useState, useEffect} from 'react'
import RSSParser from 'rss-parser'

const RssFeed = () => {
  const [feed, setFeed] = useState([])

  useEffect(() => {
    const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
    let parser = new RSSParser();
    parser.parseURL(`${CORS_PROXY}https://papabearcodes.com/rss.xml`, function (err, feed) {
      if (err) throw err;
      setFeed(feed)
      console.log(feed)
    })
  }, [])

    return (
    <div>
        <h1>RSS Feed</h1>
        <p>{feed.title}</p>
        {feed.items.map((item, i) => (
            <div key={i}>
                <h1>{item.title}</h1>
                <p>{item.content}</p>
            </div>
        ))}
    </div>
    );
  }

export default RssFeed

If I don't loop over the items, I can access the feed.title and refresh with no issues. Like so: 

 return (
    <div>
        <h1>RSS Feed</h1>
        <p>{feed.title}</p>
    </div>
    );

Upvotes: 0

Views: 887

Answers (1)

Nick
Nick

Reputation: 16586

Your initial state seems incorrect. If it's something like const [feed, setFeed] = useState({ title: "", items: [] }), you probably won't hit this issue since feed.items will be an array during the first render (right now it's undefined during the first render)

import React, {useState, useEffect} from 'react'
import RSSParser from 'rss-parser'

const RssFeed = () => {
  const [feed, setFeed] = useState({ title: "", items: [] })

  useEffect(() => {
    const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"
    let parser = new RSSParser();
    parser.parseURL(`${CORS_PROXY}https://papabearcodes.com/rss.xml`, function (err, feed) {
      if (err) throw err;
      setFeed(feed)
      console.log(feed)
    })
  }, [])

    return (
    <div>
        <h1>RSS Feed</h1>
        <p>{feed.title}</p>
        {feed.items.map((item, i) => (
            <div key={i}>
                <h1>{item.title}</h1>
                <p>{item.content}</p>
            </div>
        ))}
    </div>
    );
  }

export default RssFeed

Upvotes: 1

Related Questions