I am using reactjs and i’m facing problem in updating an object.
I have map statement In which i’m changing partition key and returning that object.
The problem is when i console value in map function that print right values But then when i console the final object. That contains same partition key and that is wrong. Partition key or id should be different as you can see my code below and the actual output and the desire output.
this.state = {
keyb: 0,
clockVisiblity:false,
partitions:[
{id:1,name:"P1"},
{id:2,name:"P2"},
{id:3,name:"P3"},
],
dayDetails:[
{
"day":"Monday",
"full_day":false,
"partition":1,
"start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
},
],
activePartition:1,
}
setPartitionsDetails=()=>{
var partitionData = this.state.dayDetails.find((item)=>item.partition===this.state.activePartition)
const dayDetails = this.state.partitions.map((partition) => {
partitionData.partition=partition.id
console.log("You object ",partitionData)
return partitionData
}
)
}
final object of daydetails comes:
[
{
"day":"Monday",
"full_day":false,
"partition":3,
"start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
},
{
"day":"Monday",
"full_day":false,
"partition":3,
"start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
},
{
"day":"Monday",
"full_day":false,
"partition":3,
"start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
}
]
where as the desire object containers unique or different partition key.
[
{
"day":"Monday",
"full_day":false,
"partition":1,
"start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
},
{
"day":"Monday",
"full_day":false,
"partition":2,
"start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
},
{
"day":"Monday",
"full_day":false,
"partition":3,
"start_time":"Thu Sep 01 2022 18:47:09 GMT+0500 (PKT)"
}
]
>Solution :
This is occurring because you’re using the same instance of partitionData to write the value of partition, so 2 is overwritten on 1 and 3 is overwritten on 2, and you get 3 in all the instances, you can fix this by making clone of partitionData and return that clone after updating.
const dayDetails = this.state.partitions.map((partition) => {
let partitionDataClone = {...partitionData};
partitionDataClone.partition = partition.id
return partitionDataClone;
})
As the partition is on the first level of this object, so the shallow cloning works here, but for nested objects, you should consider deep cloning.