Having issues with isDragging attribute in dnd

Question

I use typescript for my project. I am trying to make some css effect (color change while dragging) while dragging a column. But I am getting errors while using isDragging attribute. Could any help me sort it out?

The error is: Property 'isDragging' does not exist on type 'DetailedHTMLProps

I know I am attempting to add the attribute isDragging to div. That is not a supported attribute for HTMLElement. That is why it gives such an error.

My question is how can I make it workable for my code.

Answer 1

You could use data attributes instead.

For example it could become:

...
<div ... data-dragging={snapshot.isDragging}>
   ...
</div>
...

and then match it with CSS:

[data-dragging="true"] {
  /* your styles */
}

---

Super simple example: https://stackblitz.com/edit/react-dpfmdi?file=src/App.js (click the paragraph)