0

necesito renderizar desde la API de instagram el feed de manera en que se renderizen tanto videos, como imagenes o carruseles, pero no lo consigo, si alguno tiene una idea, les dejo mi codigo abajo, lo que pude lograr con este codigo es obtener todos las url del feed, pero renderiza todo, pero solo en etiqueta imagen, se que el return deberia devolverme uno de los dos pero no se me ocurre otra forma

       const [data, setData] = useState();

      useEffect(() => {
        fetch(FeedInstagram)
        .then((res) => res.json())
        .then((json) => json.data)
        .then((info) => setData(info))
        .catch((err) => console.log('error'))
       }, []);

     return(
       <div>{data?.map((el)=>{
        if (el.media_type === 'IMAGE' || 'CAROUSEL_ALBUM') {
            return <Card key={el.id} titulo={el.caption} img={el.media_url} fecha= 
          {el.timestamp} />
            } else if (el.media_type === 'VIDEO') {
            return <Video key={el.id} titulo={el.caption} video={el.thumbnail_url} fecha= 
           {el.timestamp} />
         }
        })}
       </div>
       )
      }

aca van los componentes de imagen y de video

   function Video(props) {
        return (  
           <div className='card'>
           <video src={props.video}/>
           <h4>{props.titulo}</h4>
           <p>{props.fecha}</p>
          </div>
        );
    }

     export default Video;

     function Img(props) {
      return (  
         <div className='card'>
            <img src={props.img} />
            <h4>{props.titulo}</h4>
            <p>{props.fecha}</p>
         </div>
       );
       }

      export default Img;

1 respuesta 1

0

Puedes intentar cambiar tu return de la siguiente forma. También me doy cuenta que un error es que tienes || 'CAROUSEL_ALBUM' sin especificar con que se va a comparar, es decir el.media_type === 'CAROUSEL_ALBUM'

return (
  <div>
  {
    data?.map((el) => (
      <React.Fragment>
        { (el.media_type === 'IMAGE' ||  el.media_type === 'CAROUSEL_ALBUM') && <Card key={el.id} titulo={el.caption} img={el.media_url} fecha= 
       {el.timestamp} /> }

        { el.media_type === 'VIDEO' && <Video key={el.id} titulo={el.caption} img={el.thumbnail_url} fecha= 
        {el.timestamp} /> } 
      </React.Fragment>
    )
  }
  </div>
)

Aquí te dejo un ejemplo de lo que estoy haciendo para el renderizado condicional. https://codesandbox.io/s/sharp-shamir-zqmeur?file=/src/App.js Es un pequeño ejemplo en el que cambio si un número debe ser puesto como un <p> o un <h1>.

2
  • excelente, me sirvio, estoy aprendiendo react, y esto lo tenia hecho con vainilla, desconocia el uso del fragment, muchas gracias Commented el 18 jul. 2022 a las 21:56
  • Como aclaración. React.Fragment es como hacer un <div>. Cuando hay un renderizado condicional dentro de un map, es mucho más sencillo utilizar React.Fragment como un elemento auxiliar para retornar algo, y dentro de ese fragment hacer la manipulación para renderizar un elemento u otro. Es un pequeño hack para resolver tu problema de una forma más sencilla y sin necesidad de usar return.
    – Jacobo
    Commented el 18 jul. 2022 a las 22:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.