Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to update and object with key and store in an array and then finally save in state?

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.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

[
       {
          "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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading