Swapping two objects in array: ReactJS

Question

I asked myself if there is a clean, proper way to swap two objects in an array using setState. This is what I currently do:

export function moveStepUp(index) {
    if(index > 0){
        let currentStep = this.state.stepsData[index];
        let stepAbove = this.state.stepsData[index - 1];

        this.setState((prevState) => ({
            stepsData: prevState.stepsData.map((step, i) => {
                if(i === index - 1)
                    return {
                        ...currentStep,
                        position: i
                    };
                if(i === index)
                    return {
                        ...stepAbove,
                        position: i
                    };

                return step;
            })
        }), () => console.log(this.state.stepsData));
    }
}

This code is working, but I thought there might be a better solution. It seems like too much lines of code for such a simple task. Thanks!

Mayank Shukla · Accepted Answer · 2018-02-16 09:24:26Z

7

Why not simply swapping two array values by using a third variable if you know the element index. First copy the array in another variable, swap two array values, then use setState to update the state value.

Like this:

this.setState(prevState => {
    let data = [...prevState.data];

    let temp = data[index-1];
    data[index-1] = data[index];
    data[index] = temp;

    return { data };
})

Instead of spread operator, you can use any other way to create a copy of array.

edited Feb 16, 2018 at 9:24

answered Aug 31, 2017 at 7:23

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nocebo Over a year ago

It works, thanks! I just wanted to see if there's a smooth option doing it with setState. But this looks a lot cleaner!

Mayank Shukla Over a year ago

glad it helped you :) one suggestion always try to perform the calculation first then use setState to update the state value, instead of putting the logic inside setState.

Arun · Accepted Answer · 2020-10-23 06:10:45Z

1

In react hooks you can use this, this works for me

const [array,setArray]= useState([]);
setArray(array => {
    let data = [...array];
    let temp = data[j];
    data[j] = data[j+1];
    data[j+1] = temp;
    console.log(data);
    return data ;
})

answered Oct 23, 2020 at 6:10

Arun

6631 gold badge10 silver badges18 bronze badges

Collectives™ on Stack Overflow

Swapping two objects in array: ReactJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related