React onDrop event is not working on div element - html

Question

I am creating on drag and drop functionality using react. but my handleDrop function is not being invoked. It means my onDrop event is not working. not found any solution. thanks in advance.
I am sharing my code snippet with you guys, please have a look.:
import React, { useState, useRef } from 'react';
const App: React.FC = () => {
const [cards, setCards] = useState([
{ id: 1, title: 'Card 1', list: 'TODO' },
{ id: 2, title: 'Card 2', list: 'TODO' },
{ id: 3, title: 'Card 3', list: 'COMPLETED' },
{ id: 4, title: 'Card 4', list: 'COMPLETED' },
]);
const dragItem = useRef<HTMLDivElement>(null);
const [draggedOver, setDraggedOver] = useState<null | number>(null);
const handleDragStart = (e: React.DragEvent<HTMLDivElement>, id: number) => {
console.log("drag start");
dragItem.current = e.target as HTMLDivElement;
e.dataTransfer.setData('id', id.toString());
};
const handleDragEnter = (id: number) => {
console.log("entered");
setDraggedOver(id);
};
const handleDragLeave = () => {
console.log("leaved");
setDraggedOver(null);
};
const handleDrop = (e: React.DragEvent<HTMLDivElement>, list: string) => {
console.log("dropped");
e.preventDefault();
const id = Number(e.dataTransfer.getData('id'));
const newCards = [...cards];
const card = newCards.find((c) => c.id === id);
card!.list = list;
setCards(newCards);
setDraggedOver(null);
};
return (
<div className="app">
<div className="lists">
<div className="list todo">
<h2>TODO</h2>
{cards
.filter((c) => c.list === 'TODO')
.map((card) => (
<div
key={card.id}
className="card"
draggable={true}
onDragStart={(e) => handleDragStart(e, card.id)}
onDragEnter={() => handleDragEnter(card.id)}
onDragLeave={handleDragLeave}
onDrop={(e) => handleDrop(e, 'COMPLETED')}
ref={dragItem}
>
{card.title}
</div>
))}
</div>
<div className="list completed">
<h2>COMPLETED</h2>
{cards
.filter((c) => c.list === 'COMPLETED')
.map((card) => (
<div
key={card.id}
className="card"
draggable={true}
onDragStart={(e) => handleDragStart(e, card.id)}
onDragEnter={() => handleDragEnter(card.id)}
onDragLeave={handleDragLeave}
onDrop={(e) => handleDrop(e, 'TODO')}
>
{card.title}
</div>
))}
</div>
</div>
</div>
)
}
export default App;
can anyone help me here? am I missing something?
Note:-I want to do this without using a third-party library.

Answer 1

Seems like this question is already answered here
Why is ondrop not working?
Thanks to azium
You will need to add onDragOver event to those divs as well