React.js - Array.unshift() not updating array on front-end

Question

I have a small implementation of drag and drop using react-dnd . There are two columns, dragging from right side column to the left one activates the specific status item.

On drop, pushCard() is called, which (as the name suggests), pushes the dragged item into the array of activated statuses ie, status_data .

But the problem is, status_data.push(itemToPush) , pushes the new item at the end of the array. I wanted to push the item on top of the array ie, index 0 of the array.

status_data.unshift(itemToPush) works in this case, but unshift only updates the array in the state and on the backend, but it doesn't show the updated array on the front-end. Rather it would just keep pushing the same element that was dragged first.

Simple description of problem in a GIF.

pushCard :

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 }));
}

renderActiveStatuses

renderActiveStatuses() {
    let renderedResult = '';
    if (this.state.template.status_data.length < 0) {
      renderedResult = (<p>No status active in this template.</p>);
    } else {
      renderedResult = this.state.template.status_data.map((status, i) => {
        return (
          <Status deleteStatus={this.deleteStatus} handleStatusUpdate={this.onStatusUpdate} index={i} id={status.id} moveCard={this.moveCard} statusData={status} key={status.id} />
        );
      });
    }
    return renderedResult;
}

renderActiveStatuses is called in the render function of the component.

Answer 1

What about this?

this.setState({template: Object.assign({}, this.state.template, { status_data })});

As you did in your question, you are only assigning to your state the contents of this.state.template , while the original one never changes, so your state becomes

state = {
    template: {status_data: ...},
    status_data: ...,
    ...
}

Answer 2

The status objects, like the itemToPush that you show here, have no property id , the one you are using as a key in Status . You can try key={i} instead (even if using the map index is not the best idea).

You can generate a (probably) unique ID like this:

const itemToPush = {
    id: Math.random().toString(36).substr(2, 16), 
    ...
}

and use status.id now as you did before.

There are better ID generators if there is any risk in the case you generate millions of these.