Next.js Discord

Discord Forum

How to get event.target.value

Answered
Baldfaced hornet posted this in #help-forum
Open in Discord
Baldfaced hornetOP
const ListingDetails = ({ id, title, images, details, price, quantity, eventId, identifyName }: Props) => {
    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>
    )
}
Answered by @ts-ignore
just do 
showSelectedImage(index)
View full answer

15 Replies

Baldfaced hornetOP
Trying to pass the value of the Image when it is clicked to the showSelectedImage func
and from where is this event variable coming?
Baldfaced hornetOP
a prop of images: string[]
"use client"
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;
}
Baldfaced hornetOP
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
Baldfaced hornetOP
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
Answer
Baldfaced hornetOP
😮 ty