Search code examples
reactjsreact-dnd

React-dnd what does $splice do


I am reading an example of the React-dnd project:

moveCard(dragIndex, hoverIndex) {
    const { cards } = this.state;
    const dragCard = cards[dragIndex];

    this.setState(update(this.state, {
      cards: {
        $splice: [
          [dragIndex, 1],
          [hoverIndex, 0, dragCard]
        ]
      }
    }));}

Is this $splice the same one explained on this page?

Could anybody explain what does this chunk of code do? The $splice function is very confusion to me.


Solution

  • 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.