onChange problem
Answered
Yellowstripe scad posted this in #help-forum
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
change
onChange
to onValueChange
<CheckboxGroup value={groupSelected} isRequired={true} onValueChange={setGroupSelected} name="soundDescriptors" className="flex flex-wrap gap-1" orientation="horizontal">
6 Replies
CheckboxGroup is from nextui right?
change
change
onChange
to onValueChange
<CheckboxGroup value={groupSelected} isRequired={true} onValueChange={setGroupSelected} name="soundDescriptors" className="flex flex-wrap gap-1" orientation="horizontal">
Answer
Asiatic Lion
hi, there !
I can fix it
Please Send me total source code
Yellowstripe scadOP
this is already solved, i have another post open if you wanna take a look
Asiatic Lion
🫰