import React, { Component } from 'react';
import { Draggable, Droppable } from 'react-drag-and-drop';
 
class MakeUseOf extends Component {
  render() {
    return (
      <div>
        <Draggable type="foo" data="bar">
          <div>Drag me!</div>
        </Draggable>
       
        <Droppable types={['foo']} onDrop={this.handleDrop}>
          <div className='dropbox'>Drop here!</div>
        </Droppable>
      </div>
    );
  }
 
  handleDrop(data:any, event:any) {
    // This method runs when the data drops
    console.log(data); // 'bar'
  }
}
 
export default MakeUseOf;

Here is an example of a component with function istead of a class:When the video starts, it will take you to the VSCODE Screen showing the function component.

4bzJrEETW4w