React add more than one photo in array

Question

im new in react, and its complicated to explain but. i want to put more than one photo in array.

I have created an data.js file

import car from '../../images/Logo.png';
import skardis1 from '../../images/projects/1.jpg'
import skardis2 from '../../images/projects/2.jpg'
import skardis3 from '../../images/projects/3.jpg'

const data = [
    {
        id:1,
        image: skardis1,
        title: 'PAVADINIMAS',
        category: 'Privatūs',
        description: 'ČIA KAŽKOKS TEKSAS',
        projectimages: // i want to put here more photos for example: skardis2, skardis2, skardis3

    },
    {
        id:2,
        image: car,
        title: 'PAVADINIMAS',
        category: 'Visuomeniniai',
        description: 'ČIA KAŽKOKS TEKSAS',
        projectiamges:  skardis3

    },
    
];
export default data;

Also i want to render it to here to see all photos one by one

Menu.js

import React from 'react';
import {Animated} from "react-animated-css";

function Menu({menuItem}) {
    return (
        <div className="item">
            {
            menuItem.map((item) => {
                    return  <div className="item-con" key={item.id}>
                        <Animated animationIn="fadeIn" animationOut="fadeOut" animationInDuration={1800} animationOutDuration={2400} isVisible={true}>
                            <div className="item-container">
                                <img src={item.image} alt=""/>
                                <h2>{item.title}</h2>
                                <p>{item.description}</p>
                                ---SHOW MY ALL PHOTOS HERE-----
                            </div>
                        </Animated>
                    </div>
                })
            }
        </div>
    )
}

export default Menu;

index.js file

import React, { useState } from 'react';

import Menu from './Menu';
import Button from './Button';
import data from './Data';
import './style.css';

const allCategories = ['Visi', ...new Set(data.map(item => item.category))];


const Projects = () => {


    const [menuItem, setMenuItem] = useState(data);
  const [buttons, SetButtons] = useState(allCategories);
  // console.log(data);

  const filter = (button) => {
    if(button === 'Visi'){
      setMenuItem(data);
      return;
    }
    const filteredData = data.filter(item => item.category === button);
    setMenuItem(filteredData);
  }

    return (
        <div id="projects" className="App">
        <div className="title">
            Projektai
        </div>
        <Button button={buttons} filter={filter}/>
        <Menu menuItem={menuItem}/>
      </div>
    )
}

export default Projects

Maybe someone undertood me and can explain how to do this. I am new here, so dont judge me. thank you

Answer 1

You can define your projectimages as an array:

projectimages: [skardis2, skardis2, skardis3]

Then in your Menu component, you simply add another map() to iterate the projectimages for every item:

import React from "react";
import { Animated } from "react-animated-css";

function Menu({ menuItem }) {
  return (
    <div className="item">
      {menuItem.map((item) => (
        <div className="item-con" key={item.id}>
          <Animated animationIn="fadeIn" animationOut="fadeOut" animationInDuration={1800} animationOutDuration={2400} isVisible={true}>
            <div className="item-container">
              <img src={item.image} alt="" />
              <h2>{item.title}</h2>
              <p>{item.description}</p>
              {item.projectimages.map((pImage) => (
                <img src={pImage} alt="" />
              ))}
            </div>
          </Animated>
        </div>
      ))}
    </div>
  );
}

export default Menu;