从 React 地图功能保存图像

Question

I want to transfer an image from one useState function to another when clicked

const [images, setImages] = useState([]);
  useEffect(() => {
    setImages(ImgArray);
  }, []);

this is where I get my source image from which is

export const ImgArray = [
    {
        id: 1,
        src: 'https://cdn.britannica.com/s:600x1000/91/181391-050-1DA18304/cat-toes-paw-number-paws-tiger-tabby.jpg'
        
    }
];

my idea was to, whenever i click on an image that exact image in the array is going to be saved into my 'setLightboxImage'

const [lightboxImage, setLightboxImage] = useState([]);

<div className="header">

{images.map((image)=>(<React.Fragment><img alt="" src={image.src} key={image.id} onClick={setLightboxImage(image.src)} /> <div></div></React.Fragment>))}

    </div>

but i guess it doesn't work that way... can i somehow handle this in another way perhaps in a seperate function?

Also as a sidenote everything is wrapped inside of an Arrow function component ' const App = () => {return(...)} '

Answer 1

By calling the function with the brackets "()", the function will be triggered at initialization.

You could use this way:

const [lightboxImage, setLightboxImage] = useState([]);

<div className="header">

{images.map((image)=>
(<React.Fragment>
<img alt="" 
src={image.src} 
key={image.id} 
onClick={() => {setLightboxImage(image.src)}} /> 

<div></div>
</React.Fragment>))}
</div>