title: REACT- TypeError: Cannot assign to read only property 'color' of object
body: <p><em>REACTJS learner here</em>. I am trying to toggle the text via <code>useReducer</code> but it doesn't seems to work and I have no idea why. I keep getting the warning message of <em>cannot assign to read only property 'color' of object</em>. However, when I remove the style tag <code>style={listt.list[0].style</code> in <code>&lt;h2&gt;</code> tag. The text <code>'color=purple'</code> changed to <code>'color=red'</code> and the console log shows the mutated list well. So I have really no idea what is the problem here. Any help would be greatly appreciated! Here is the link to codesandbox.
  <a href="https://codesandbox.io/s/state-prob-cd21c?file=/src/Toggle.js" rel="nofollow noreferrer">https://codesandbox.io/s/state-prob-cd21c?file=/src/Toggle.js</a></p>
  <pre><code>import React, { useReducer } from &quot;react&quot;;
  
  function Texting() {
    const state = {
      list: [{ name: &quot;I am awesome&quot;, style: { color: &quot;purple&quot; } }],
    };
  
    function reducer(listt, action) {
      switch (action) {
        case &quot;toggle&quot;:
          const clone = [...listt.list]; //clone is new copy
          clone[0].style.color = &quot;red&quot;;
          console.log(clone);
          return { ...listt, list: clone };
      }
    }
    const [listt, dispatch] = useReducer(reducer, state);
    console.log(&quot;new list is &quot; + JSON.stringify(listt.list[0].style));
    return (
      &lt;div&gt;
        Color = {listt.list.map((x) =&gt; x.style.color)}
        &lt;button onClick={() =&gt; dispatch(&quot;toggle&quot;)}&gt;toggle!&lt;/button&gt;
        &lt;h2 style={listt.list[0].style}&gt;
          Why Error : TypeError: Cannot assign to read only property 'color' of
          object
        &lt;/h2&gt;
      &lt;/div&gt;
    );
  }
  
  export default Texting;
  </code></pre>