Next.js Discord

Discord Forum

onClick event not triggering parent function

Unanswered
Spotted Redshank posted this in #help-forum
Open in Discord
Spotted RedshankOP
Hi I'm having an issue with my child component not calling a function in the parent.
It only does it after I spam click on the component

Code listed below.

5 Replies

Spotted RedshankOP
Parent
'use client';
...
export default function Home() {

...
  const [showOptions, setShowOptions] = useState(false);

  function toggleOption() {
    console.log("toggle");
    setShowOptions(!showOptions);
  }

  return (

    <main className='relative w-sceen min-h-screen'>
      <div className='mx-auto overflow-y-auto custom-scrollbar p-2'>
        <List setShowSave={setShowSave} toggleOption={toggleOption} />
      </div>
...
      }
      {showOptions ?
        <OptionNavigation /> : ''
      }
    </main>

  );

}
Child
"use client"
...
export default function list({setShowSave, toggleOption}) {
...

       return (
        <div>
            <DndContext id='list' sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
                <SortableContext items={items} strategy={verticalListSortingStrategy}>
                    <div className='flex flex-col w-[40rem]'>
                        
                        {items.map((itemObject, index) => {

                            return (
                                <React.Fragment key={itemObject.id}>
                                    <div className='relative' onClick={() => toggleOption()}>
                                        <div className='w-full h-full bg-tb rounded-lg bg-opacity-50 border-4 border-dashed  border-sb absolute top-0 -z-10'>
                                        </div>
                                        <Item itemObject={itemObject} key={itemObject.id} count={index} />
                                    </div>
                                    <div className='w-[2px] h-[2rem] bg-accent mx-auto'></div>
                                </React.Fragment>
                            );

                        })}
    
                        <Modal addItemToList={addItemToList} />

                    </div>
                </SortableContext>
            </DndContext>
        </div>
    );
    
...

}
I'm still learning Next.js so this might be a stupid question.
Spotted RedshankOP
It seems to work fine outside the loop. After the loop it doesn't
Spotted RedshankOP
Seems to happen because of the dnd package any way I can fix it with keeping the dnd