Update array in React JS

Question

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.

You need to take a clone first. Let me share the Code.

Kaushik Makwana
– Kaushik Makwana

2022-09-06 14:06:48 +00:00
Commented Sep 6, 2022 at 14:06 — Kaushik Makwana
– Kaushik Makwana, Commented Sep 6, 2022 at 14:06

Nick Vu · Accepted Answer · 2022-09-06 14:16:52Z

1

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

answered Sep 6, 2022 at 14:16

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

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

Comments

Kaushik Makwana · Accepted Answer · 2022-09-06 14:11:24Z

1

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

answered Sep 6, 2022 at 14:11

Kaushik Makwana

2,58610 gold badges37 silver badges57 bronze badges

2 Comments

Kaushik Makwana Over a year ago

I am not able to test this code due to incompleted code.

Ahmed Yasin Over a year ago

It's oky kaushik. I'm glad you replied and spend your previous time in read and replying my question. I put your code as it is. It didn't returned any error but it behavior was same as it was before. But as you said you had not full code so didn;t tested. This things still makes you an amazing programmer. I appreciate brother.

Collectives™ on Stack Overflow

Update array in React JS

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related