Update array in React JS-CodePudding

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.

CodePudding user response：

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:[]}));

CodePudding user response：

etTimeFunc =()=>{

    const timingDetailsClone = [...this.state.timingDetails]


    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 = timingDetailsClone.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: [...this.state.timingDetails,...timingDetailsClone,] ,activeModalDays:[]});
}