Update array in React JS

I’m using react js. and working in class component. To understand the current scenario. I would like to tell you the what job this function is doing.

Well,
lets suppose i have shops array and week days array.

shop:[ {id:1,name:"S1"} ]

days = [ {id:1,name:"Monday"}, {id:2,name:"Tuesday"}, {id:3,name:"Wednesday"}, {id:4,name:"Thursday"}, ... ]

Step 1:

Now I selected first two days from days array and store them in a new array. lets call that array with activeModalDays

activeModalDays = [ {id:1,name:"Monday"}, {id:2,name:"Tuesday"} ],

Step 2:

Now we have a last array that will store the list of final form of objects that desire. lets call that

timingDetails = []

Step 3

Now create a function that maps activeModalDays and form object and returns that.

setTimeFunc =()=>{
    const timingDetails = this.state.activeModalDays.map((day) => {
        let start_time = this.state.start_time
        let close_time = this.state.close_time

        console.log("I'm in it 3",day.name)
        let obj = {
            shop:this.state.activePartition,
            day:day.name,
            start_time:start_time,
            close_time:close_time
        }

        let daytime= this.state.timingDetails.find((item)=>item.day===obj.day&&item.partition===obj.partition)
        console.log("din ",daytime)
        
        if (daytime) {
            let daytimeClone = {...daytime}
            console.log("deyare ",daytimeClone)
            console.log("true")

            if (start_time !==daytimeClone.start_time) {
            daytimeClone.start_time=start_time
            }
            if (close_time!==daytimeClone.close_time) {
            daytimeClone.close_time=close_time
            }    
            return daytimeClone
        } 
        else {
            return obj
        }

    })

    this.setState({ timingDetails: [...timingDetails] ,activeModalDays:[]});
}

At the end timingDetails returns

[
{"close_time": 2022-09-06T11:14:09.926Z, "day": "Monday", "full_day": false, "shop": 1, "start_time": 2022-09-06T14:14:09.926Z},
 {"close_time": 2022-09-06T11:14:09.926Z, "day": "Tuesday", "full_day": false, "shop": 1, "start_time": 2022-09-06T14:14:09.926Z}
]

which is write output so far.
But Now when i repeat this process and new days like friday and saturday. The final objects of monday and tuesday removes automatically from timingDetails.

>Solution :

If you want to stack up on the timingDetails state, you should modify your setState like below

this.setState({ timingDetails: [...this.state.timingDetails,...timingDetails] ,activeModalDays:[]});

Or use the previous state of timingDetails in setState

this.setState((prevState) => ({ timingDetails: [...prevState.timingDetails,...timingDetails] ,activeModalDays:[]}));