Next.js Discord

Discord Forum

React Draggable Error

Answered
Spotted Redshank posted this in #help-forum
Open in Discord
Original message was deleted.
Answered by Spotted Redshank
"use client";
import Draggable from 'react-draggable'; 
import React from 'react'

export default  function block()
{
  const nodeRef = React.useRef(null);

    return (
        <div> 
        <h3>GeeksforGeeks - Draggable Components</h3> 
        <Draggable nodeRef={nodeRef}> 
          <div ref={nodeRef}>We can move this text</div> 
        </Draggable> 
      </div> 
    )
}
View full answer

3 Replies

Spotted Redshank
Hi the code it self is working but I keep getting the warnings.

"use client";
import Draggable from 'react-draggable'; 
import React from 'react'

export default  function block()
{

    return (
        <div> 
        <h3>GeeksforGeeks - Draggable Components</h3> 
        <Draggable> 
          <div>We can move this text</div> 
        </Draggable> 
      </div> 
    )
}
app-index.js:32 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DraggableCore which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here:
Spotted Redshank
"use client";
import Draggable from 'react-draggable'; 
import React from 'react'

export default  function block()
{
  const nodeRef = React.useRef(null);

    return (
        <div> 
        <h3>GeeksforGeeks - Draggable Components</h3> 
        <Draggable nodeRef={nodeRef}> 
          <div ref={nodeRef}>We can move this text</div> 
        </Draggable> 
      </div> 
    )
}
Answer