title: How to deep merge objects in react js
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{"activities": [
                  {
                      "actor": {
                          "id": 409,
                          "avatar": "",
                          "first_name": "Sakthi",
                          "last_name": "Vel",
                          "headline": null,
                          "is_online": false,
                      },
                      "foreign_id": "post.UsPost:253",
                      "id": "ed50e218-f3e8-11e8-8080-800132d8e9c0",
                      "object": {
                          "id": 253,
                          "comments": 0,
                          "likes": 0,
                          "files": [
                              {
                                  "id": 112,
                                  "file": "",
                                  "content_type": "video/mp4",
                                  "file_type": "video",
                                  "created_at": "2018-11-29T15:10:38.524836Z"
                              }
                          ],
                          "post_type": "post",
                          "is_bookmarked": false,
                          "is_liked": false,
                          "link": "/post/api/v1/253/",
                          "target": "post.UsPost:253",
                          "foreign_id": "post.UsPost:253",
                          "actor": {
                              "id": 409,
                              "avatar": "",
                              "first_name": "Sakthi",
                              "last_name": "Vel",
                              "headline": null,
                              "is_online": false,
                          },
                          "text": "#Multiple video (.mp4) test. Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.",
                          "skills": [
                              "VFX"
                          ],
                          "created_at": "2018-11-29T15:10:37.426332Z",
                          "is_link": true,
                          "view_count": 0,
                          "created_by": 409
                      },
                      "origin": "user:409",
                      "target": "",
                      "time": "2018-11-29T15:10:37.426332",
                      "type": "post",
                      "verb": "posted"
                  }
                  
                  
             {
              "activities": [
                  {
                      "actor": {
                          "id": 64,
                          "last_name": "",
                          "headline": "Learning is my Passion",
                          "is_online": false,
                          "username": "Uchenna1"
                      },
                      "foreign_id": "post.UsPost:183",
                      "id": "447f6710-eb08-11e8-8080-8001369e78cd",
                      "object": {
                          "id": 183,
                          "comments": 1,
                          "likes": 1,
                          "files": [
                              {
                                  "id": 87,
                                  "content_type": "image/jpg",
                                  "file_type": "image",
                                  "created_at": "2018-11-18T08:02:18.759309Z"
                              }
                          ],
                          "post_type": "post",
                          "is_bookmarked": false,
                          "is_liked": false,
                          "link": "/post/api/v1/183/",
                          "target": "post.UsPost:183",
                          "foreign_id": "post.UsPost:183",
                          "actor": {
                              "id": 64,
                              "first_name": "Uchenna",
                              "last_name": "",
                              "headline": "Learning is my Passion",
                              "is_online": false,
                              "username": "Uchenna1"
                          },
                          "text": "This is codigo",
                          "skills": [
                              "Javascript"
                          ],
                          "created_at": "2018-11-18T08:02:17.626600Z",
                          "is_link": true,
                          "view_count": 10,
                          "created_by": 64
                      },
                      "origin": "user:64",
                      "target": "",
                      "time": "2018-11-18T08:02:17.626600",
                      "type": "post",
                      "verb": "posted"
                  }
              ],
              "activity_count": 1,
              "actor_count": 1,
              "created_at": "2018-11-18T08:02:18.647108",
              "group": "posted_2018-11-18",
              "id": "451b1eab-eb08-11e8-8080-80007915e2b6.posted_2018-11-18",
              "is_read": false,
              "is_seen": true,
              "updated_at": "2018-11-18T08:02:18.647108",
              "verb": "posted"
          }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I am facing issue in merging two object. Below is the snap of two object and result.</p>
  
  <p><a href="https://i.stack.imgur.com/jIoR4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/jIoR4.png" alt="enter image description here"></a></p>
  
  <p>Here in the above image I wan to merge Old Data and new Data</p>
  
  <p>but after merging getting wrong output i.e new updated data.</p>
  
  <p>I am using command to do it.</p>
  
  <pre><code>let newData = { ...a , ...b }
  
   console.log('new updated data: ',newData)
  </code></pre>
  
  <p>also I am performing this operation in redux action before dispatching.</p>
  
  <p>Here {"activities": [....],....} is one object and I want to merge with the below one.</p>