I have a button nested in a sortable list using dnd kit and core UI, however when I click on a button, the onClick function does not event get called.
const [pIndex, setPeopleIndex] = useState(0)
const handleClick = (peopleIndex) => {
console.log(peopleIndex) //This is being all passed in as `0` by <ListItemComponent />
}
{
data.people.map((element, peopleIndex) => (
<div key={peopleIndex}>
<AccordianHeaderComponent onClick={() => setPeopleIndex(peopleIndex)} />
<DndContext
sensors={sensors}
collisionDetection={closestCenter}
onDragEnd={handleDragEnd}
>
<SortableContext
items={element.addresses}
strategy={verticalListSortingStrategy}
>
{
element.addresses.map((address, addressIndex) => (
<ListItemComponent
key={addressIndex}
handleClick={handleClick}
peopleIndex={peopleIndex}
/>
))
}
</SortableContext>
</DndContext>
</div>
))
}
const ListItemComponent = ({handleClick, peopleIndex}) => {
const {
attributes,
isDragging,
listeners,
setNodeRef,
transform,
transition,
} = useSortable({ id: dragID });
return (<li
onClick{openModal}
id={dragID}
ref={setNodeRef}
style={style}
{...attributes}
{...listeners}
>
<MenuDropDown openModal={openModal} />
</li>
)
}
// MenuDropDown Component
const MenuDropDown = ({openModal}) => {
const handleMenuItemClick = () => openModal()
return (
<CDropDown>
<CDropdownToggle className="bg-white border-none" caret={false}>
<CIcon icon={cilOptions} size="lg" />
</CDropdownToggle>
<CDropdownMenu>
<CDropdownItem onClick={handleMenuItemClick}>Edit Question</CDropdownItem>
</CDropdownMenu>
</CDropDown>
)
}
For some reason, when clicking on MenuDropDown
which should show a drop down menu, is not working after adding dnd kit to the list of items