Shubham
Shubham

Reputation: 189

React Animation on state change

On state change, the elements switch position based on the current array. I want to add an animation that shows the transition of swapping happening is there an easy way to do that.

   const bubbleSort = async () => {
      let arr = test;
      for(let i=0;i<arr.length;i++){
        for(let j=0;j<arr.length-1-i;j++){
          setActiveIndex([j,j+1]);

           if(arr[j]>arr[j+1]){
              let temp = arr[j];
              arr[j] = arr[j+1];
              arr[j+1] = temp;

           }
           await sleep(1000);

           setTest([...arr]);
        }
        setSortedIndex(test.length-1-i);
      }

Upvotes: 1

Views: 275

Answers (1)

akashdeep arora
akashdeep arora

Reputation: 129

There is a optional parameter to setState() that is a callback function , which executes on state change, you can execute desired actions there.

this.setState({
     currentMonth: +this.state.currentMonth + 1
    }, () => {
     //This is the call back function, perform the desired actions here.
    })
}

Upvotes: 1

Related Questions