draggable item disappear on drag

[ahmado-vic]

i have a conditional rendering for dragOverlay component but when I drag the item the draggable item disappears however I cancel the dragging process how can I fix this issue please.

here's my code .

function AreaContainer({ area }: AreaProps) {
const [activeId, setActiveId] = useState<string | null>(null);
const [overId, setOverId] = useState<string | null>(null);
const { setNodeRef } = useDroppable({
   id: area.id,
   data: {
     type: "Area",
     area,
   },
});

  useDndMonitor({
     onDragStart(event) {
      setActiveId(event.active.id.toString());
  },
   onDragEnd(event) {
      setActiveId(null);
    },
   onDragOver(event) {
     setOverId(event.over?.id.toString() ?? null);
    },
   onDragCancel(event) {
      setOverId(null);
      setActiveId(null);
     },
 });

  const branch = branchesData.find((branch) => branch.id === +activeId!);

   return (
        <Card key={area.id} className="flex flex-col gap-4" ref={setNodeRef}>
              <CardHeader className="border-b">
                    <CardTitle>Area: {area.name}</CardTitle>
                    <CardDescription>Senior area manager Name</CardDescription>
             </CardHeader>
           <CardContent className="flex flex-col gap-4">
                  {branchesData
                        .filter((branch) => branch.area === area.id)
                        .map((branch) => (
                                <BranchContainer branch={branch} key={branch.id} />
                   ))}

             <DragOverlay>
                   {activeId ? (
                          <Badge className="w-full py-3" variant="secondary">
                                  {branch?.name}
                          </Badge>
                      ) : null}
             </DragOverlay>
         </CardContent>
      </Card>
   );
 }

[adnahl]

Can you explain why you are using a number type id for "branches" and a string type id for "active"?

When you use +activeId or Number(activeId), and activeId is null, it will return 0, if you have a branch with id 0 it will match.

Try this:

  // ...
  // const branch = branchesData.find((branch) => branch.id === +activeId!);
  const numActiveId = Number(activeId)
  const branch =
    (activeId && !isNaN(numActiveId))
    ? branchesData.find((branch) => branch.id === numActiveId)
    : null

  return (
    <Card key={area.id} className="flex flex-col gap-4" ref={setNodeRef}>
      <CardHeader className="border-b">
        <CardTitle>Area: {area.name}</CardTitle>
        <CardDescription>Senior area manager Name</CardDescription>
      </CardHeader>
      <CardContent className='flex flex-col gap-4'>
          {branchesData
              .filter((branch) => branch.area === area.id)
              .map((branch) => (
                <BranchContainer branch={branch} key={branch.id} />
           ))}
          <DragOverlay>
            {(activeId && branch) ? (
              <Badge className='w-full py-3' variant='secondary'>
                {branch.name}
              </Badge>
              ) : null}
          </DragOverlay>
      </CardContent>
    </Card>
  );
}