How do i need to setup an array if i need multiple images in an object?-CodePudding

I am currently working on my Portfolio Website and i need to setup my data-structure. So, i have numerous "projects" that consist of: Title, Description and a number of Images to every project.

What my Data looks right now:

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 allData

Further on, i am mapping over this array to display every project in an Accordion, which works fine, but i dont know how to setup my Code, when i need more than Image in an Project.

So i thought i maybe need to also map over every single object in my array? Please can someone help me?

<div className="projects">
   <div className="section-title">Projects</div>
      {allData.map((project) => (
          <Project text={project.title} src={project.image} description={project.info}/>
      ))}
</div>

CodePudding user response：

first you need to send your images as an Array ,

const allData = [
    {
        id:3,
        images: [img1, img2, img3],
        title: 'Title 3',
    },
    {
        id:3,
        images: [img1, img2],
        title: 'Title 3',
    },

]

and send the data to the Project Component

 <Project text={project.title} imgs={project.images} description={project.info}/>

then in your Project component you need to make a new map for the images property

const Project = ({ text, imgs, description }) => {
    return <div>
        <h5>{description}</h5>
        { imgs.map(e => (<img
            src={e}
            alt={description}
        />)) }
        <p>{text}</p>
    </div>;
};

CodePudding user response：

just turn your image property into an array.

    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 allData

And map over images

<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>

let me know if you need more explanation