useDrag method of react-dnd , cannot get isDragging in typescript

Question

I am new to react with typescript, I am implementing drag and drop feature using react-dnd package with typescript. following this blog I am trying to drag images but I am facing an issue

Property isDragging does not exist on type unknown

code :

const [{ isDragging }, drag] = useDrag({
        // item denotes the element type, unique identifier (id) and the index (position)
        item: { type, id: image.id, index },
        // collect method is like an event listener, it monitors whether the element is dragged and expose that information
        collect: monitor => ({
          isDragging: monitor.isDragging()
        })
      });

the error I got : -

I am confused in the setting type of isDragging or how can I solve this error

Your screenshot seems to indicate that you have 2 errors. What's the error in the parameter for useDrag? Also, I'd suggest checking the official documentation instead of that guide: https://react-dnd.github.io/react-dnd/docs/api/use-drag — Stanislas, Nov 14 '21 at 15:40
Property 'isDragging' does not exist on type 'unknown' is error in argument in docs i cannot find reference for typescript, and i am new to react with typescript — Tanuj Doshi, Nov 15 '21 at 03:40

score 2 · Answer 1 · answered Feb 16 '22 at 06:49

2

try to add this to you collect function

(monitor: DragSourceMonitor)

and of course you need to import this interface first

import { DragSourceMonitor } from 'react-dnd'

answered Feb 16 '22 at 06:49

Rudi Kurniawan

21
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 16 '22 at 07:11

score 1 · Accepted Answer · answered Nov 15 '21 at 06:30

Got the answer from react-dnd TSX example

sandbox url

const [{ isDragging }, drag] = useDrag({
        type: "image",
        item: () => {
          return { id, index }
        },
        collect: (monitor: any) => ({
          isDragging: monitor.isDragging(),
        }),
      })

the type is not optional , we need to define type for same

useDrag method of react-dnd , cannot get isDragging in typescript

2 Answers2