Button onClick opens all image preview instead one - reactjs

Question

I'm trying to figure out how to open one item(at my situation image gallery), but not all at once.
I'm using FsLightbox dependencies. My code seems working until I'm triggering button to open the image gallery, but it opens all three columns.
index.js
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
all my data and images in data.js file
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: [skardis2, skardis3]
},
{
id:2,
image: skardis2,
title: 'PAVADINIMAS',
category: 'Visuomeniniai',
description: 'ČIA KAŽKOKS TEKSAS',
projectimages: [ skardis3, skardis2 ]
},
{
id:3,
image: skardis3,
title: 'PAVADINIMAS',
category: 'Visuomeniniai',
description: 'ČIA KAŽKOKS TEKSAS',
projectimages: [ skardis3, skardis2 ]
},
];
export default data;
and the main Menu.js file
import React, { useState } from 'react';
import FsLightbox from 'fslightbox-react';
import {Animated} from "react-animated-css";
function Menu({menuItem}) {
const [toggler, setToggler] = useState(false);
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>
<button onClick={() => setToggler(!toggler)}> Daugiau</button>
</div>
</Animated>
</div>
})
}
{
menuItem.map((item) => {
return <div>
<FsLightbox
toggler={toggler}
sources={item.projectimages}
/>
</div>})
}
</div>
)
}
export default Menu;
As I said it, then I clicked the button, it opens all three items. I want to click on the button to one item section; it opens only that item images in preview.. now I have to close the image preview three times. added IMG how my items columns look now

Answer 1

This is because all the FsLightbox has a shared toggler state.
To solve this, you could create a MenuItem component to render each item, each with it's own toggler state. For example:
function Menu({ menuItems }) {
return (
<div className="items">
{menuItems.map(item => <MenuItem item={item} />)}
</div>
);
}
function Menuitem({ item }) {
const [toggler, setToggler] = useState(false);
return (
<div className="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>
<button onClick={() => setToggler(!toggler)}> Daugiau</button>
</div>
</Animated>
</div>
<div>
<FsLightbox toggler={toggler} sources={menuItem.projectimages} />
</div>
</div>
);
}
Now that each MenuItem has it's own local state, they should open individually based on the button you clicked.