tengo el siguiente problema. Estoy trayendo unas rutas de imágenes que están almacenadas en firebase. Tengo una función que traen datos y los ordena para después mostrarlo en la galería de imágenes. El tema es que no logro hacer el ciclo con map y me tira el siguiente error :
y es así como viene el array con los objetos :
y esta es la función que muestra la galería :
function CarouselResponsive(props) {
var src = props.imgSrc
console.log('src' , src);
var galery = src.map( row =>
<div key={row.url}>
<img src={row.url} alt=""/>
<p className="legend">{row.legend}</p>
</div>
)
return <Carousel>
{galery }
</Carousel>
}
y de aquí es donde lo llamo el componente
function Home() {
return (
<div className="">
<CarouselResponsive imgSrc={ getDataCarousel() }/>
</div>
)
}
function getDataCarousel(){
var dataFiles = [];
db.collection('files_home_carousel').get().then(( querySnapshot ) => {
querySnapshot.forEach( (doc , index) => {
var file = doc.data()
dataFiles.push({
url : file.file ,
legend : file.legend
})
})
})
return dataFiles
}
Cualquier comentario es bienvenido, saludos
useEffect(() => getDataCarousel() , [])