React Dom not updating after updating a state array

Question

so this function updates this state array: let [Produits, setProduit] = useState(JSON.parse(Devis.produits))

 let changeQte = (id, e) => {
    let produittable = Produits;
    produittable.forEach((p) => {
      if (p.id == id) {
        p.quantityAchete = parseInt(e.target.value);
      }
    });
    setProduit(produittable);  
  };

the array did update without any problem but the changes aren't getting re-rendered

  {console.log('rendering') ,Produits.map((p) => (
            <div key={p.id} className="product_column flex_center">
              <div className="productItem">{p.nom}</div>
              <div className="productItem">{p.category}</div>
              <div className="productItem">{p.prix_vente} DA</div>
              <input
                onChange={(e) => changeQte(p.id, e)}
                type="number"
                name="qte"
                value={p.quantityAchete}
              />

as you can see i'm loggin to the console to check if that line is getting executed and it does ! but the values rendered doesn't update !

Answer 1

Don't mutate state, do this instead:

 let changeQte = (id, e) => {
    setProduit(existing => existing.map(c => c.id === id ? {...c,quantityAchete: parseInt(e.target.value)} : c))
  };   

These lines:

    // this line just sets produittable to the same reference as Produits.
    // so now produittable === Produits, it's essentially useless
    let produittable = Produits;
    produittable.forEach((p) => {
      if (p.id == id) {
        // you are mutating 
        p.quantityAchete = parseInt(e.target.value);
      }
    });
    // because produittable === Produits, this doesn't do anything
    setProduit(produittable);  

Answer 2

In addition to what Adam said, besides not modifying the state directly, the reason you're not seeing any changes is because the component only gets rerendered when the state actually changed. And to know whether the state changed, react makes a shallow comparison between the two states. Since you modified the state directly, the reference remains the same and as such your component isn't rerendering.

Answer 3

To expand on Adam's answer, you can also clone the current state Produits and assign it to the local variable produittable and have the state update be recognized.

So instead of this:

let produittable = Produits;

You could simply clone it like so, with the spread operator:

let produittable = [...Produits];

Answer 4

I was facing the same issue. where I had search component and showing list of item in the dropdown. where issue was it was showing items in the list but not in the updated array when I console it.

Fix worked for me was passing unique id as component key property. before I was passing name and because of duplicate name it was not removing the items from the DOM.

before:
<li key={item.name}>{item.name}</li>

after:
<li key={item.id}>{item.name}</li>