title: How to save the state of drag and drop rows in React?
body: <p>I am a beginner and currently, I am trying to learn how to make the rows of the table draggable and rearrangable. I am using the react-beautiful-dnd library. I was able to make the rows draggable but I am not able to save the state of the rows after dragging and dropping.
  I would appreciate any help regarding this.</p>
  <pre><code>import { Component } from 'react';
  import React from 'react';
  import './App.css';
  import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
  
  class App extends Component
  {
  
    drawTable = () =&gt; {
      return (
      &lt;div&gt;
        &lt;DragDropContext&gt;
        &lt;Droppable droppableId=&quot;Table&quot;&gt;
          {(provided) =&gt; (
      &lt;table {...provided.droppableProps} ref={provided.innerRef}&gt;
        &lt;Draggable draggableId='1' index={1}&gt;
        {(provided) =&gt; (
        &lt;tr ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}&gt;
          &lt;td&gt;1&lt;/td&gt;
          &lt;td&gt;Mark&lt;/td&gt;
          &lt;td&gt;Otto&lt;/td&gt;
          &lt;td&gt;@mdo&lt;/td&gt;
        &lt;/tr&gt;
        )}
        &lt;/Draggable&gt;
        &lt;Draggable draggableId='2' index={2}&gt;
          {(provided) =&gt; (
        &lt;tr ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}&gt;
          &lt;td&gt;2&lt;/td&gt;
          &lt;td&gt;Jacob&lt;/td&gt;
          &lt;td&gt;Thornton&lt;/td&gt;
          &lt;td&gt;@fat&lt;/td&gt;
        &lt;/tr&gt;
        )}
        &lt;/Draggable&gt;
        &lt;Draggable draggableId='3' index={3}&gt;
          {(provided) =&gt; (
        &lt;tr ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}&gt;
          &lt;td&gt;3&lt;/td&gt;
          &lt;td&gt;Larry the Bird&lt;/td&gt;
          &lt;td&gt;@twitter&lt;/td&gt;
        &lt;/tr&gt;
        )}
        &lt;/Draggable&gt;
       {provided.placeholder} 
      &lt;/table&gt;
      )}
      &lt;/Droppable&gt;
      &lt;/DragDropContext&gt;
    &lt;/div&gt;
     
    );
    
    }
  
  
  render = () =&gt; {
  
      return (
        &lt;div&gt;
          {this.drawTable()}
        &lt;/div&gt;
      );
  
    }
  }
  
  
  export default App;
  </code></pre>