title: React redux: Update nested state's boolean with another nested array of objects by comparing IDs
body: <p>I have following state:</p>
  <pre><code>merchant: [{
      title: &quot;Setup&quot;,
      steps: [
      {id: &quot;provider&quot;, done: false}, 
      {id: &quot;api_key&quot;, done: false}
      {id: &quot;client&quot;, done: false}
      ]
  }]
  </code></pre>
  <p>and i want to update it with the following dataset</p>
  <pre><code>merchant: [{
      title: &quot;Setup&quot;,
      steps: [
      {id: &quot;provider&quot;, done: false}, 
      {id: &quot;api_key&quot;, done: true}
      ]
  }]
  </code></pre>
  <p>So that I end up with the following:</p>
  <pre><code>merchant: [{
      title: &quot;Setup&quot;,
      steps: [
      {id: &quot;provider&quot;, done: false}, 
      {id: &quot;api_key&quot;, done: true}
      {id: &quot;client&quot;, done: false}
      ]
  }]
  </code></pre>
  <p>What would be the cleanest way to achieve this?</p>
  <p>I've done something like this in my reducer, but it seems like a terrible idea based on the output I'm getting.</p>
  <pre><code>guide_progression: {
      ...state.guide_progression,
      merchant: state.guide_progression.merchant.map(stateGuide =&gt;
          payload.user.guide_progression.merchant.map(userGuide =&gt;
              userGuide.title === stateGuide.title &amp;&amp;
              {
                  ...stateGuide,
                  steps: stateGuide.steps.map(stateStep =&gt;
                      userGuide.steps.map(userStep =&gt;
                          userStep.id === stateStep.id &amp;&amp;
                          {
                              ...stateStep,
                              done: userStep.done
                          }
                      )
                  )
              }
          )
      )
  }
  </code></pre>
  <p>Really appreciate suggestions for how to solve this. I've been struggling to find a good solution on the web.</p>