How to get event.target.value

[teal maple]

    const [counter, setCounter] = useState(0);
    const totalPictures = images.length;
    const [imageLoopCounter, setImageLoopCounter] = useState(0);

    function showSelectedImage(value) {
        setCounter(value);
    }


    return (
        <div className="flex flex-row my-10 px-10">
            <div className="flex flex-col flex-grow max-w-2xl">
                <div className="relative h-96 max-w-2xl">
                    <Image
                        src={images[counter]}
                        className="object-cover hover:scale-125 z-50"
                        quality={80}
                        fill
                        alt="Frag Swap listing image"
                    />
                </div>
                <div className="flex flex-row justify-start">
                    {images.map((image, index) => (
                        <div className="relative h-20 w-24">
                            <Image
                                src={images[index]}
                                className="object-cover py-2 pr-4 cursor-pointer opacity-50 hover:opacity-100"
                                fill
                                alt="Frag Swap image"
                                value={index}
                                onClick={() => showSelectedImage({event.target.value})}
                            />
                        </div>
                    ))}
                </div>
            </div>
            <div className="px-10 pt-4 flex-grow">
                <h1 className="text-4xl font-semibold leading-normal">{title}</h1>
            </div>
        </div>
    )
}```

[verbal glen]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[teal maple]

Trying to pass the value of the Image when it is clicked to the showSelectedImage func

[untold storm]

showSelectedImage(images[index])

???

and from where is this event variable coming?

[teal maple]

a prop of images: string[]

import Image from "next/image"
import {useState} from "react";
import SwapListing from "@/components/SwapListing";
import {set} from "zod";

type Props = {
    id: string;
    title: string;
    images: string[];
    details: string;
    price: string;
    quantity: string;
    eventId: string;
    identityName: string;
}```

[untold storm]

try this instead

[teal maple]

No luck

Which makes sense since the onClick event wouldn't have it's value preset. Only way I can think of is somehow accessing that value that is the index when the image tag is created

[untold storm]

what does showSelectedImage expect?

[teal maple]

a number, the showSelectedImage passes the value to set a counter

Which then refreshes the larger <Image> that is shown with the new image that was selected

Verified all that works by just passing a "1" through without trying to use the value of the image tag being selected

[untold storm]

just do

showSelectedImage(index)

[teal maple]

😮 ty