Nrthugu

I'm developing an app with react native. I have an array of object in the state (lettersPosition) and I want to sort it temporally in a variable within a function (but I don't want the state itself to be sorted) :

verifyWord = () => {

    const array = this.state.lettersPosition;       

    array.sort(function (a, b) {

        return a.x - b.x;

    });

    var word = "";

    array.map(function (char) {

        word += char.letter

    })

}

I tested it and it appears that my state itself was updated after the sorting (even if I called the sort function on the temp array).

It is like if the 'array' variable contains the whole reference to the state and not only its value. And if I modify that variable, it modifies the state too.

Is it a normal behaviour in react ?

How can I just get the value of the state and manipulate it without changing the state itself ?

Thanks

Use Array.from(). It creates a shallow copy.

const sortedArray = Array.from(this.state.lettersPosition);

...etc

Try using var newArray = oldArray.slice(); rather than const array = this.state.lettersPosition; In your code you're not creating a copy of the array, you're just assigning it to another variable.

See Copy array by value for more info on var newArray = oldArray.slice();.

You can use the spread operator too.

var a = [1, 2, 3, 4, 5]

var b = [...a]