javascript and html drag and drop to react

In html and javascript I have to run this drag and drop code and I want to move now to react, can anyone help?

Navbar component

<ul className="menu">
<Link to="/home"> <li title="Home"><i  className="fa fa-home">Home</i></li> 
</Link>
<Link to="/pedidos">  <li title="Pedidos"><i  className="fa fa- 
question">Pedidos</i></li></Link>
</ul>

Target Component

<div className="container boxstyle">

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

</div>

Functions in javascript

function allowDrop(ev) {
ev.preventDefault();
 }

 function drag(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}

 function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}