Conditionally rendering a component inside of <Draggable>, using react-draggable, is breaking the draggable functionality. Any ideas?

Question

I'm trying to conditionally render a component inside another component that uses react-draggable. If my return function returns a div, dragging works fine. If my function returns SomeComponent, dragging breaks completely. I've tried React.forwardRef and attaching the ref to nodeRef on Draggable, and on the ref inside the component, but that doesn't work. Is this maybe a limit of react-draggable?

const Master = () => {
  const nodeRef = useRef(null);

  const renderComponent = (type) => {
    switch (type) {
      case "typography":
        // If we return <Typography />, drag stops working.
        // return <Typography content="Hello!" ref={nodeRef} />; // Not Working
        return <div ref={nodeRef}>hello</div>; // Working
      case "button":
        return <button>Click Me</button>;
      default:
        break;
    }
  };
  return (
    <Draggable nodeRef={nodeRef}>{renderComponent("typography")}</Draggable>
  );
};

const Typography = React.forwardRef(({ content }, ref) => {
  return <div ref={ref}>{content}</div>;
});

Here is a link to a forked codesandbox if you want to check it out. https://codesandbox.io/s/gallant-voice-ly8jyj?file=/src/Master.js:113-673

Thanks everyone!

Arjun · Accepted Answer · 2022-06-01 01:39:38Z

1

Wrapping the renderComponent call in a div seems to solve the issue:

const Master = () => {
  const nodeRef = useRef(null);

  const renderComponent = (type) => {
    switch (type) {
      case "typography":
        return <Typography content="Hello!" />;
      case "button":
        return <button>Click Me</button>;
      default:
        break;
    }
  };
  return (
    <Draggable nodeRef={nodeRef}>
      <div ref={nodeRef}>{renderComponent("typography")}</div>
    </Draggable>
  );
};

You also don't require forwardRef in this case

answered Jun 1, 2022 at 1:39

Arjun

5045 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jbcortez89 Over a year ago

lol now that seems so obvious. Thank you!

Collectives™ on Stack Overflow

Conditionally rendering a component inside of <Draggable>, using react-draggable, is breaking the draggable functionality. Any ideas?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related