title: Mutations inside forEach for redux reducer (with immer.js)
body: <p>I found a way to solve this issue, but it just feels flat out ugly. I have a custom prop <code>isMultipleValid</code> if that prop is <code>true</code>, I need to iterate over an array of objects and set on each object <code>isValid:</code>property to <code>false</code></p>
  
  <blockquote>
    <p><em>As of note, I'm also using <a href="/questions/tagged/immerjs" class="post-tag" title="show questions tagged &#39;immerjs&#39;" rel="tag">immerjs</a> (auto-included in
    <a href="/questions/tagged/reduxjs-toolkit" class="post-tag" title="show questions tagged &#39;reduxjs-toolkit&#39;" rel="tag">reduxjs-toolkit</a>), which allows me to directly mutate an immutable object
    with an assignment</em></p>
  </blockquote>
  
  <h2>What I want to do:</h2>
  
  <pre><code>const reducer = createReducer({//...}, {
     [someAction.type]: (state, action) =&gt; {
        const { questionId, isMultipleValid } = action.payload;
        const question = state.find((q) =&gt; q.id === questionId);
        if (question) {
          if (!isMultipleValid) {
             question.questionOptions.forEach((o) =&gt; {
                o.isValid = false;
             }
          }
        // ... more code here, but skipped for readability
        }
     }
  })
  </code></pre>
  
  <p>This however results in an <a href="/questions/tagged/eslint" class="post-tag" title="show questions tagged &#39;eslint&#39;" rel="tag">eslint</a> error: </p>
  
  <blockquote>
    <p>Assignment to property of function parameter 'o'.</p>
  
  <pre><code>{
      "resource": "&lt;PATH&gt;/quizEditorReducer.ts",
      "owner": "eslint",
      "code": "no-param-reassign",
      "severity": 8,
      "message": "Assignment to property of function parameter 'o'.",
      "source": "eslint",
      "startLineNumber": 39,
      "startColumn": 11,
      "endLineNumber": 39,
      "endColumn": 12
  }
  </code></pre>
  </blockquote>
  
  <h2>What needs to be done:</h2>
  
  <p>Now as ugly as it feels, there's a workaround to simply re-assign the value to a temporary variable like so:</p>
  
  <pre><code>const reducer = createReducer({//...}, {
     [someAction.type]: (state, action) =&gt; {
        const { questionId, isMultipleValid } = action.payload;
        const question = state.find((q) =&gt; q.id === questionId);
        if (question) {
          if (!isMultipleValid) {
             let temp;
             question.questionOptions.forEach((o) =&gt; {
                temp = o;
                temp.isValid = false;
             }
          }
        // ... more code here, but skipped for readability
        }
     }
  })
  </code></pre>
  
  <p>Now this will work, but just feels flat-out wrong. Is there a way to bypass this?</p>
  
  <hr>
  
  <p>PS: Yes I know I could simply do <code>/* eslint no-param-reassign: 0 */</code> for this file, but it still feels like there should be some way to meet the both ends in the middle</p>