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;