Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

271
Vistas
React-How to display make objects loop in react

Here is what i tried

episode.js

import Parser from "rss-parser";
import React from "react";

export default function Episode() {
  
const parser = new Parser();
const url1 = "https://anchor.fm/s/75abc654/podcast/rss";
const [data, setData] = React.useState({});
 
 (async  () => {
    let data = await parser.parseURL(url1);
  setData(data);
   // console.log(data.title)
   // data.items.forEach((item) => {
      // console.log(item.title)
      //console.log(item.pubDate.slice(5, 17))
      //console.log(item.enclosure.url)
      // console.log(item.itunes.image)
    });
  })();
return(
  <h1>{item.title}</h1>

  {data.items.map((item, index)=>{
  return(
     <h1>{item.title}</h1>
   )})}

)

}

And the output is blank screen.. No error in console.. Help me to get the data from the rss feed without blank screen

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

You're calling async method unlimited time! You need to call it once via useEffect just when component rendered for first time:

import Parser from "rss-parser"; 
import React, { useEffect } from "react";

function Episode() {
  const parser = new Parser();
  const url1 = "https://anchor.fm/s/75abc654/podcast/rss";
  const [data, setData] = React.useState({});

  useEffect(() => {
    (async () => {
      let data = await parser.parseURL(url1);
      console.log(data);
      setData(data);
    })();
  }, []);

  return (
    <>
      {data.items?.map((item, index) => (
        <h1>{item.title}</h1>
      ))}
    </>
  );
}
export default function App() {
  return <Episode />;
}

Edit nervous-pasteur-z6xu9

about 4 years ago · Juan Pablo Isaza Denunciar

0

Just replace your async function with a useEffect hook like this

useEffect(() => {
  async function fetchMyAPI() {
    let data = await parser.parseURL(url1);
    setData(data);
    // console.log(data.title)
    // data.items.forEach((item) => {
    // console.log(item.title)
    //console.log(item.pubDate.slice(5, 17))
    //console.log(item.enclosure.url)
    // console.log(item.itunes.image)
  }
  fetchMyAPI();
}, []);

This will be executed once every time when your component is loaded on screen

Also change the data.item.map to

{data.items?.map((item, index) => {
    return <h1>{item.title}</h1>;
 })}

Else it will throw error on first render

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda