React-dnd what does $splice do

Question

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.

score 23 · Accepted Answer · answered Nov 27 '15 at 14:21

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.

score 6 · Answer 2 · answered Jul 30 '19 at 11:09

6

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

answered Jul 30 '19 at 11:09

Hitesh Sahu

41,955
17
205
154

1

Thank you, I like this version a lot more. – Keith Oct 16 '19 at 00:14
Can someone answer to this question? https://stackoverflow.com/questions/64913638/how-to-swap-two-cards-without-changing-position-other-cards – The IT gal Nov 20 '20 at 07:36

React-dnd what does $splice do

2 Answers2