Next.js Discord

Discord Forum

onChange problem

Answered
Yellowstripe scad posted this in #help-forum
Open in Discord
Avatar
Yellowstripe scadOP
the Checkbox group onChange has this error when I hover over it, how can I fix it?

Type 'Dispatch<SetStateAction<string[]>>' is not assignable to type 'FormEventHandler<HTMLDivElement> & ((value: string[]) => void)'.
  Type 'Dispatch<SetStateAction<string[]>>' is not assignable to type 'FormEventHandler<HTMLDivElement>'.
    Types of parameters 'value' and 'event' are incompatible.
      Type 'FormEvent<HTMLDivElement>' is not assignable to type 'SetStateAction<string[]>'.ts(2322)



export default function VoteClient({ foundSwitch }: { foundSwitch: switchType }) {
    const [groupSelected, setGroupSelected] = React.useState<string[]>([]); // Update the type of groupSelected
    return (
        <form className="mx-auto max-w-screen-xl flex min-h-screen mt-16 flex-col">
            <Button className='w-full mb-24' type='submit'>
                Submit your Vote
            </Button>
            <div className="flex flex-row items-center">
                <p className="text-2xl">Vote for {foundSwitch.switch_name}'s Sound Descriptors</p>
                <p className="text-xs ml-2">(Choose 4)</p>
            </div>
            <div className="mt-2">
                <CheckboxGroup value={groupSelected} isRequired={true} onChange={setGroupSelected} name="soundDescriptors" className="flex flex-wrap gap-1" orientation="horizontal">
                    <CustomCheckbox value="accented">Accented</CustomCheckbox>
                    <CustomCheckbox value="bassy">Bassy</CustomCheckbox>
                </CheckboxGroup>
                <p className="text-xl mt-24 pb-2">Sound Tests</p>
                <div className="flex flex-row flex-wrap wrap">
                    {foundSwitch.videos.map((video_url: string, index: number) => (
                        <div className="aspect-video h-42 mr-2 mb-2" key={index}>
                            <YoutubeEmbed key={index} videoId={video_url}/>
                        </div>
                    ))}
                </div>
            </div>
        </form>
    );
}
Answered by Ray
CheckboxGroup is from nextui right?
change onChange to onValueChange
<CheckboxGroup value={groupSelected} isRequired={true} onValueChange={setGroupSelected} name="soundDescriptors" className="flex flex-wrap gap-1" orientation="horizontal">
View full answer

6 Replies

Avatar
Ray
CheckboxGroup is from nextui right?
change onChange to onValueChange
<CheckboxGroup value={groupSelected} isRequired={true} onValueChange={setGroupSelected} name="soundDescriptors" className="flex flex-wrap gap-1" orientation="horizontal">
Answer
Avatar
Asiatic Lion
hi, there !
I can fix it
Please Send me total source code
Avatar
Yellowstripe scadOP
this is already solved, i have another post open if you wanna take a look
Avatar
Asiatic Lion
🫰