While changing one state in React both states are getting changed

Question

I am trying to change one state but while doing that somehow my other state is also getting changed and I can't find the problem in this what should I do? here is my code:

import React, {useState } from 'react'


 //style = {{margin : '50px', minWidth : '1200px' , minHeight : '500px'}
 const Container = ()=>{
const [arr , setArray] = useState([])
const [steps , setSteps] = useState([[]]);


const createArray = () =>{
    let array = []
        let i = 0;
        while (i <60){
          let number =  Math.random()*100;
            array.push(number);
            i++;
        }
         return array;
}
const BubbleSort = (array) =>{
    let funarray = new Array();
    funarray = array ;
    for (let i = 0 ; i < funarray.length-1 ; i++){
        for(let j = 0 ; j < funarray.length-1 ; j++){
            if(funarray[j]>funarray[j+1]){
                [funarray[j],funarray[j+1]] = [funarray[j+1],funarray[j]]
                setSteps([...steps,funarray]);
            }
        }
    }
}
    
  const handleCreateNewData = ()=>{
   let newarr = createArray();

    setArray([...newarr]);

}
const handleBubbleSort = ()=>{
    BubbleSort(arr);
}


return(
    <div className="container "  style = {{margin : '50px ', minWidth : '1200px' , minHeight : '500px'}}>
    <div className="row">
        <div className="col s2 " style = {{margin : '20px' , padding : '20px'}}>
            <div className="row" ><a class="waves-effect waves-light btn green" onClick = {handleCreateNewData}>Create New Array</a></div>
            <div className="row"><a class="waves-effect waves-light btn black" onClick = {handleBubbleSort}>BubbleSort</a></div>
            <div className="row"><a class="waves-effect waves-light btn black">button</a></div>
            <div className="row"><a class="waves-effect waves-light btn black">button</a></div>
            <div className="row"><a class="waves-effect waves-light btn black">button</a></div>
            <div className="row"><a class="waves-effect waves-light btn black">button</a></div>

        </div>
        <div className="col s9 grey">
            <div style = {{minWidth : '1000px' , minHeight : '500px'}}>
               {arr.map((val , index)=>(
                   
                   
                   <div>
                   <div style = {{height : '1px'}}></div>
                    <div className="bar black" style = {{height : '7px' , width : val*8}}> </div>
                    <div style = {{height : '1px'}}></div>
                    </div>
                   
               )
               )
                   
               
               }
                
            </div>
        </div>
        </div>
    </div>
)
}

export default Container ;

I m trying to create an array of arrays in steps in which after each pass the new array will be saved but while doing that my arr is also changing.

Answer 1

I think your mistake is in the line:

funarray = array

of Bubblesort. Should work with:

funarray = [...array]

Otherwise you are modifying your original array, to which you are passing the reference.