React-dnd what does $splice do React-dnd what does $splice do reactjs reactjs

React-dnd what does $splice do


It's basically an immutable version of plain splice functions such as

newcards.splice(dragIndex, 1); // removing what you are dragging.newcards.splice(hoverIndex, 0, dragCard); // inserting it into hoverIndex.

Instead of directly manipulating the target array, those Immutability Helpers are helping you update the state by creating and assigning a new state.


Took me a while to understand. Here is step by step explanation in conventional arrow function

  moveCard = (dragIndex, hoverIndex) => {    // list of cards    let newcards = this.state.cards;     // dragCard is card we are dragging    let dragCard = newcards[dragIndex];    // removing this dragCard from array    newcards.splice(dragIndex, 1);     // insert dragCard at hover position    newcards.splice(hoverIndex, 0, dragCard);     // update State    this.setState({      cards: newcards    });  };