How to mutate state in react?

Question

I'm trying the change the value of an object field that is nested in an array. I keep getting this error, "Cannot assign to read only property '0' of object '[object Array]'"

Here is what the state looks like

{
    "school stuffs": [
        {
            "_id": "629332e33f0e48af3d626645",
            "completed": false,
            
        },
        {
            "_id": "629425fc9c50b142dff947a9",
            "completed": true,
            
        }
    ],
    "household and furniture": [
        {
            "_id": "629334424709234a344c0189",
            "completed": false,
            
        },
        {
            "_id": "629334f12da7859af0828c9a",
            "completed": false,
            
        }
    ]
}

Here is the code I'm using to mutate the state and change the value of "completed" to the opposite value of the current Boolean.

const newArray = { ...productArray,  [value]: {...productArray}[value]  }
const index = productArray[value].findIndex(index => index._id === innerElement._id)
newArray[value][index].completed = !newArray[value][index].completed
console.log(newArray[value][index].completed); 

Answer 1

The thing with react is that, you should not mutate the state, for that purpose exist useState, and pure functions methods, like in the next example: Imagine you have a shopping cart.

const [cart, setCart] = useState([]);

And you want to add a product, you could do it this way:

const addCart = product => {
  setCart([...cart, product]) // Using spread syntax.
  setCart(cart.concat(product)) // Using pure functions.
}

If you want to mutate a prop in an object inside a state, this is the way you could do it:

const increaseQuantity = id => {
  const mappedCart = cart.map(prd => prd.id === id ? {...prd, quantity: prd.quantity + 1} : prd);
  setCart(mappedCart)
}

Of course you can use simple for loops, or other ways, but the matter here is that you can't mutate the state in react.

I hope i have been able to help you