tengo estos datos
[ { "filePath": "imageFile", "locationName": "name1" }, { "filePath": "imageFile", "locationName": "name2" } ]y devuelvo el valor de filePath para mostrar imágenes usando React js en una tarjeta como esta:
const images = (displayimage) => { return displayImages.map((displayimage, key) => ( <div key={key}> <div className="card bg-light mb-3"> <div className="card-header"> <center>{displayimage.locationName}</center> </div> <div className="card-body"> <div className="imgDiv"> <img src={displayimage.filePath} /> </div> </div> </div> </div> )); } return <div>{images()}</div>; };pero solo regresa 1 tarjeta, luego la imagen regresa aleatoriamente según el objeto que se muestra primero en console.log (displayImages).
¿Cómo puedo mostrar todas las tarjetas por imágenes? Gracias
Lo que necesita almacenar en la constante de images es solo el resultado de llamar a map() en su matriz displayImages . Entonces, asumiendo que tienes:
const displayImages = [ { filePath: "imageFile", locationName: "name1" }, { filePath: "imageFile", locationName: "name2" } ];así es como debería verse su componente:
const images = displayImages.map((displayimage, key) => ( <div key={key}> <div className="card bg-light mb-3"> <div className="card-header"> <center>{displayimage.locationName}</center> </div> <div className="card-body"> <div className="imgDiv"> <img src={displayimage.filePath} /> </div> </div> </div> </div> )); return <div>{images}</div>;apilado de trabajo
Parece que su función toma un argumento displayimage pero luego asigna una variable llamada displayimages (tenga en cuenta la s ), .
Además, cuando llama a la función en la declaración de devolución, no se proporcionan argumentos.
No estoy seguro de si ha abordado los problemas anteriores en su código real, pero definitivamente crearía problemas.
Si ha abordado esos problemas, lo que recomendaría es crear un componente llamado algo así como ImageCard que tome el nombre de la ubicación de la imagen y la ruta del archivo como accesorios, por ejemplo.
const ImageCard= ({locationName,imagePath}) => { return ( <div> <div className="card bg-light mb-3"> <div className="card-header"> <center>{locationName}</center> </div> <div className="card-body"> <div className="imgDiv"> <img src={filePath} /> </div> </div> </div> </div>) }; export default ImageCard;Luego, donde actualmente está haciendo su mapa, itere sobre los datos de su imagen en el retorno de la siguiente manera (suponiendo que sus datos se llamen displayImages)
return ( displayImages.map(displayImage=>{ return ( <ImageCard locationName={displayImage.locationName} imagePath={displayImage.filePath} /> ); } )