How to use react-draggable for modal using ant-design

I decided to use the react-draggable npm package for my modal window using ant-design, (for those who don’t know react-draggable, this is a simple component for making elements draggable). But i’m having difficulty i tried to wrap my modal window inside but i got error

Cannot read property ‘className’ of undefined

import React, { useState } from "react";
import "antd/dist/antd.css";
import Modal from "antd/es/modal/Modal";
import Draggable from "react-draggable";
import Button from "antd/es/button";

const App = (props) => {
  const [visible, setVisible] = useState(false);

  return (
    <Draggable>
      <Button onClick={() => setVisible(true)} type="primary">
        Themes
      </Button>
      <Modal
        title="Customize the theme to your liking"
        centered
        visible={visible}
        onOk={() => setVisible(false)}
        onCancel={() => setVisible(false)}
        width={700}
      >
        <div className={"SideBarModal_Wrapper"}>
          <div className={"SideBarModal_Appearance"}>
            <div className={"SideBarModal_Child_Appearance"}>
              <p>Appearance</p>
            </div>

            <div>{props.SideBarWallpaperList}</div>
          </div>

          <div className={"SideBarModal_Accept_Color"}>
            <div className={"SideBarModal_Child_Color"}>
              <p>Colors</p>
            </div>

            <div>{props.list}</div>
          </div>
        </div>
      </Modal>
    </Draggable>
  );
};

export default App;

You can see my code in codesandbox there I have already installed all the required packages but I could not apply react-draggable here is the link https://codesandbox.io/s/xenodochial-mendel-4bdun

5 thoughts on “How to use react-draggable for modal using ant-design”

  1. 831219 716912Oh my goodness! an outstanding post dude. Thank you Even so Im experiencing dilemma with ur rss . Do not know why Cannot register for it. Could there be any person obtaining identical rss difficulty? Anybody who knows kindly respond. Thnkx 996552

    Reply
  2. 240479 664069The vacation special deals offered are believed as a selection of possibly the most preferred and therefore within your budget all more than the globe. Quite quite a few hostels can be proudly located inside property which is accented who has striking seashores encouraging crystal-clear rivers, contingency of an Ocean. hotels compare rates 46824

    Reply

Leave a Comment