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