title: Change state on Drag and Drop
body: <p>I'm having a todo-list made with React. It is having 3 section:- &quot;Todo&quot;, &quot;In Progress&quot; and  &quot;Done&quot;. I've implemented drag-and-drop functionality to this list. It works pretty fine. But, after the drag-and-drop, the state is not updating. How can I update the state after the drop? <br></p>
  <p>Functionality:</p>
  <pre><code>const [tasks, setTasks] = useState({
  todo: [
    {
      _id: 233243424,
      name: &quot;This is a Todo&quot;,
    },
    {
      _id: 1123434,
      name: &quot;This is a second Todo&quot;,
    },
  ],
  inProgress: [
    {
      _id: 1123243,
      name: &quot;This is a In Progress&quot;,
    },
    {
      _id: 55322234,
      name: &quot;This is a second In Progress&quot;,
    },
  ],
  done: [
    {
      _id: 2455422,
      name: &quot;This is a Done&quot;,
    },
    {
      _id: 33235345,
      name: &quot;This is a second Done&quot;,
    },
   ],
  });
    let draggableTodo = null;
  
    const dragStart = (event) =&gt; {
      draggableTodo = event.target;
      setTimeout(() =&gt; {
        event.target.style.display = &quot;none&quot;;
      }, 0);
    };
    const dragEnd = (event) =&gt; {
      draggableTodo = null;
      setTimeout(() =&gt; {
        event.target.style.display = &quot;block&quot;;
      }, 0);
    };
  
    const dragOver = (event) =&gt; event.preventDefault();
  
    const dragEnter = (event) =&gt; {};
  
    const dragLeave = (event) =&gt; (event.target.style.border = &quot;none&quot;);
  
    const dragDrop = (event) =&gt; {
     event.preventDefault();
     event.target.appendChild(draggableTodo);
     //Do Something here
    };
  </code></pre>
  <p>Structure:</p>
  <pre><code> return (
   &lt;div className=&quot;tasks&quot;&gt;
    &lt;div className=&quot;tasks_container&quot;&gt;
      &lt;h1&gt;Tasks&lt;/h1&gt;
      &lt;div className=&quot;tasks-cont_menu&quot;&gt;&lt;/div&gt;
      &lt;div className=&quot;tasks-cont_body&quot;&gt;
        &lt;div
          id=&quot;todo_div&quot;
          className=&quot;tasks-body_child&quot;
          onDragOver={dragOver}
          onDragLeave={dragLeave}
          onDrop={dragDrop}
        &gt;
          &lt;div className=&quot;tasks-bd_title&quot;&gt;
            &lt;h3&gt;To Do&lt;/h3&gt;
            &lt;div className=&quot;tasks-child_status&quot;&gt;3&lt;/div&gt;
          &lt;/div&gt;
          {tasks.todo.map((todo) =&gt; {
            return (
              &lt;div
                key={todo._id}
                className=&quot;tasks-bd_content&quot;
                draggable={true}
                onDragStart={dragStart}
                onDragEnd={dragEnd}
              &gt;
                {todo.name}
              &lt;/div&gt;
            );
          })}
        &lt;/div&gt;
        &lt;div
          id=&quot;inProgress_div&quot;
          className=&quot;tasks-body_child &quot;
          onDragOver={dragOver}
          onDragEnter={dragEnter}
          onDragLeave={dragLeave}
          onDrop={dragDrop}
        &gt;
          &lt;div className=&quot;tasks-bd_title&quot;&gt;
            &lt;h3&gt;In Progress&lt;/h3&gt;
            &lt;div className=&quot;tasks-child_status&quot;&gt;1&lt;/div&gt;
          &lt;/div&gt;
          {tasks.inProgress.map((inprogress) =&gt; {
            return (
              &lt;div
                key={inprogress._id}
                className=&quot;tasks-bd_content&quot;
                draggable={true}
                onDragStart={dragStart}
                onDragEnd={dragEnd}
              &gt;
                {inprogress.name}
              &lt;/div&gt;
            );
          })}
        &lt;/div&gt;
        &lt;div
          id=&quot;done_div&quot;
          className=&quot;tasks-body_child&quot;
          onDragOver={dragOver}
          onDragEnter={dragEnter}
          onDragLeave={dragLeave}
          onDrop={dragDrop}
        &gt;
          &lt;div className=&quot;tasks-bd_title&quot;&gt;
            &lt;h3&gt;Done&lt;/h3&gt;
            &lt;div className=&quot;tasks-child_status&quot;&gt;5&lt;/div&gt;
          &lt;/div&gt;
          {tasks.done.map((done) =&gt; {
            return (
              &lt;div
                key={done._id}
                className=&quot;tasks-bd_content&quot;
                draggable={true}
                onDragStart={dragStart}
                onDragEnd={dragEnd}
              &gt;
                {done.name}
              &lt;/div&gt;
            );
          })}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  );
  </code></pre>
  <p>Like, when a todo is dragged and dropped to the done section, the <code>tasks</code> state must update to reflect the change. <br></p>
  <p>Any help is greatly appreciated! <br>
  Thank You!</p>