use jquery in React and get jquery_1.default(...).resizable is not a function

Question

I am using jquery with React. and when I want to use $(.myclass).resizable(). I got an error:use jquery in React and get jquery_1.default(...).resizable is not a function.

here is the demo: https://stackblitz.com/edit/react-modal-rnd-2?file=rnd.js

import React from 'react';
import { render } from 'react-dom';
import { Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
import $ from 'jquery';

export default class RND extends React.Component {
  constructor() {
    super();

    $('.modal-content').resizable({
      //alsoResize: ".modal-dialog",
      minHeight: 300,
      minWidth: 300
    });
    $('.modal-dialog').draggable();

    $('#myModal').on('show.bs.modal', function() {
      $(this)
        .find('.modal-body')
        .css({
          'max-height': '100%'
        });
    });
  }

  modalClose = () => {
    this.setState({
      modalShow: false
    });
  };

  onStart = () => {
    console.log('here');
  };

  render() {
    return (
      <Modal
        isOpen={this.state.showModal}
        toggle={() => {
          this.setState({ showModal: false });
          this.modalClose();
        }}
        style={{
          minWidth: '30rem',
          border: '0.1rem solid green'
        }}
      >
        <ModalHeader
          className="modal-header bg-primary modal-title text-white"
          toggle={() => {
            this.setState({ showModal: false });
            this.modalClose();
          }}
        >
          <h2> Header </h2>
        </ModalHeader>
        <ModalBody>
          <div className="form-group row">
            <div className="FormRow col-sm-12">
              <span>Body data </span>
            </div>
          </div>
        </ModalBody>
      </Modal>
    );
  }
}

what I want is to make the popup modal resizable and draggable.it also works for me if there is a way to achieve it without jquery.

Answer 1

I've found a solution. step1: npm i jquery-ui

step2: add these sources in jsx file

import 'jquery-ui/themes/base/resizable.css';
import 'jquery-ui/themes/base/draggable.css';

require('jquery-ui/ui/version');
require('jquery-ui/ui/plugin');
require('jquery-ui/ui/widget');
require('jquery-ui/ui/widgets/mouse');
require('jquery-ui/ui/widgets/resizable');
require('jquery-ui/ui/widgets/draggable');

and then you can use jquery-ui function.