title: Uncaught TypeError: Cannot assign to read only property while updating state
body: <p>I am trying to reproduce my original problem.</p>
  <p>I have two arrays in react state, and <code>Array1</code> is the original array from Database and <code>Array2</code> is the updated array in  state.</p>
  <p>The objective is to update only changed <code>rate</code> and not <code>quantity</code> (and other properties) back to the Database, hence i need to update the values of <strong>rates in object of <code>basicrecipe</code></strong> with the values of the <strong>rates in object of <code>recipeBasicRecipe</code> array</strong> for a the objects of  <code>basicrecipe</code> matching with the objects in <code>recipeBasicRecipe</code>.</p>
  <p>I am getting this error when I run the code, request help</p>
  <blockquote>
  <p><code>Error:Uncaught TypeError: Cannot assign to read only property</code></p>
  </blockquote>
  <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>let basicRecipes = [
    {
      id: 1,
      name: IceCream,
      details: [{ id: "12", name: "milk", quantity: "50", rate: "100" },
      { id: "13", name: "cream", quantity: "50", rate: "300" }]
    },
    {
        id: 2,
        name: Coffee,
        details: [{ id: "14", name: "Coffee bean", quantity: "60", rate: "200" },
        { id: "15", name: "water", quantity: "60", rate: "300" }]
  
    },
    {
        id: 3,
        name: Tea,
        details: [{ id: "16", name: "Tea leaf", quantity: "50", rate: "700"      
        }]
  }]
  
  
  let recipeBasicRecipe = [
    {
        id: 1,
        name: IceCream,
        details: [{ id: "12", name: "milk", quantity: "50", rate: "500" },
        { id: "13", name: "cream", quantity: "50", rate: "700" }]
    },
    {
        id: 2,
        name: Coffee,
        details: [{ id: "14", name: "Coffee bean", quantity: "60", rate: "800" },
        { id: "15", name: "water", quantity: "60", rate: "8000" }]
    }
  ];
  
  let r = basicRecipe;
  
  let Array2 = recipeBasicRecipes;
  
  r = r.map(item =&gt; {
    let element = Array2.find(e =&gt; e.id == item.id);
    if (element) {
      item.details = item.details.map(e =&gt; {
        let detail = element.details.find(d =&gt; d.id == e.id);
        if (detail) {
          e.rate = detail.rate;
        }
        return e;
      });
    }
    return item;
  });
  
  console.log(r);</code></pre>
  </div>
  </div>
  
  Posing the relevant react ccode:</p>
  <pre><code>const initialState = {
  
      basicRecipe: [],
  
      recipeBasicRecipes: [],
     
    };
  
    const [state, dispatch] = useReducer(recipeManagementReducer, initialState);
  
  
  </code></pre>
  <p>Function where I am executing this code</p>
  <pre><code>  const onSubmit = e =&gt; {
      e.preventDefault();
      /**
      * 
      setShowLoader();
      updateawMateris(state.recipeRawMaterials);
      *  */
  
      let r = state.basicRecipe;
  
      let Array2 = state.recipeBasicRecipes;
  
      r = r.map(item =&gt; {
        let element = Array2.find(e =&gt; e._id == item._id);
        if (element) {
          item.details = item.details.map(e =&gt; {
            let detail = element.details.find(d =&gt; d._id == e._id);
            if (detail) {
              e.rate = detail.rate;
            }
            return e;
          });
        }
        return item;
      });
  
  </code></pre>
  <p>While playing around I changed the return to make it immutable as that was cause of the errors.</p>
  <p>Here is the snippet, only problem is this returns change on Quantity in recipe as well, how do I avoid that</p>
  <pre><code>    let r = [...state.basicRecipe];
  
      let Array2 = [...state.recipeBasicRecipes];
  
      r = r.map(item =&gt; {
        let element = Array2.find(e =&gt; e._id === item._id);
        if (element) {
          item.details = item.details.map(e =&gt; {
            let detail = element.details.find(d =&gt; d._id === e._id);
            if (detail) {
              return {
                ...e,
                rate: detail.rate
              };
            }
            return e;
          });
        }
        return item;
      });
  
      console.log(r);
  </code></pre>