Actualmente estoy trabajando en mi sitio web de cartera y necesito configurar mi estructura de datos. Entonces, tengo numerosos "proyectos" que consisten en: Título, Descripción y una cantidad de Imágenes para cada proyecto.
Cómo se ven mis datos en este momento:
import img1 from './img/1.jpg'; import img2 from './img/2.jpg'; import img3 from './img/3.jpg'; const allData = [ { id:1, image: img1, title: 'Title 1', }, { id:2, image: img2, title: 'Title 2', }, { id:3, image: img3, title: 'Title 3', }, ]; export default allDataMás adelante, estoy mapeando esta matriz para mostrar cada proyecto en un acordeón, lo que funciona bien, pero no sé cómo configurar mi código, cuando necesito más que una imagen en un proyecto.
Entonces, pensé que tal vez también necesitaba mapear cada objeto en mi matriz. ¿Me puede ayudar alguien, por favor?
<div className="projects"> <div className="section-title">Projects</div> {allData.map((project) => ( <Project text={project.title} src={project.image} description={project.info}/> ))} </div>simplemente convierta su propiedad de imagen en una matriz.
const allData = [ { id:1, images: [img1, img4], title: 'Title 1', }, { id:2, images: [img2, img5], title: 'Title 2', }, { id:3, images: [img3], title: 'Title 3', }, ]; export default allDataY mapa sobre imágenes
<div className="projects"> <div className="section-title">Projects</div> {allData.map((project) => project.images.map(image =>( <Project text={project.title} src={image} description={project.info}/> )))} </div>avísame si necesitas más explicación
primero debe enviar sus imágenes como una matriz,
const allData = [ { id:3, images: [img1, img2, img3], title: 'Title 3', }, { id:3, images: [img1, img2], title: 'Title 3', }, ]y enviar los datos al componente del proyecto
<Project text={project.title} imgs={project.images} description={project.info}/>luego, en su componente Proyecto, debe crear un nuevo mapa para la propiedad de imágenes
const Project = ({ text, imgs, description }) => { return <div> <h5>{description}</h5> { imgs.map(e => (<img src={e} alt={description} />)) } <p>{text}</p> </div>; };