title: React.js - Array.unshift() not updating array on front-end
body: <p>I have a small implementation of drag and drop using <a href="https://github.com/react-dnd/react-dnd" rel="nofollow noreferrer"><code>react-dnd</code></a>. There are two columns, dragging from right side column to the left one activates the specific status item.</p>
  
  <p>On drop, <code>pushCard()</code> is called, which (as the name suggests), pushes the dragged item into the array of activated statuses i.e., <code>status_data</code>.</p>
  
  <p>But the problem is, <code>status_data.push(itemToPush)</code>, pushes the new item at the end of the array. I wanted to push the item on top of the array i.e., index 0 of the array.</p>
  
  <p><code>status_data.unshift(itemToPush)</code> works in this case, but <code>unshift</code> only updates the array in the <code>state</code> and on the backend, but it doesn't show the updated <code>array</code> on the front-end. Rather it would just keep pushing the same element that was dragged first.</p>
  
  <p><a href="https://i.stack.imgur.com/j3hMH.gif" rel="nofollow noreferrer">Simple description of problem in a GIF.</a></p>
  
  <p><strong><code>pushCard</code>:</strong></p>
  
  <pre><code>pushCard(item) {
      const { status_data } = this.state.template;
      const itemToPush = {
          title : item.title || 'CUSTOM',
          type_id : item.type_id,
          color : item.color || '#000',
          type: item.type,
          require_notes: item.require_notes || false,
          require_estimate: item.require_estimate || false
      };
      status_data.unshift(itemToPush);
      this.setState(Object.assign(this.state.template, { status_data }));
  }
  </code></pre>
  
  <p><strong><code>renderActiveStatuses</code></strong></p>
  
  <pre><code>renderActiveStatuses() {
      let renderedResult = '';
      if (this.state.template.status_data.length &lt; 0) {
        renderedResult = (&lt;p&gt;No status active in this template.&lt;/p&gt;);
      } else {
        renderedResult = this.state.template.status_data.map((status, i) =&gt; {
          return (
            &lt;Status deleteStatus={this.deleteStatus} handleStatusUpdate={this.onStatusUpdate} index={i} id={status.id} moveCard={this.moveCard} statusData={status} key={status.id} /&gt;
          );
        });
      }
      return renderedResult;
  }
  </code></pre>
  
  <p><code>renderActiveStatuses</code> is called in the <code>render</code> function of the component. </p>