Not updating state variable which is array of objects

Question

perms is an array of objects. Each object is:

{   
  catg: 'Catg1' 
  serv: ->array of serv objects     
    {   
      checked: false,
      desc: 'Serv 1'    
    } 
}

On button click, based on the catg sent, I need to update all checked to true for each serv object for that catg. Code is as below:

const [perms, setPerms] = useState<any[] | null>(null);

const handleClick = (
  event: React.MouseEvent,
  catg: string
) => {
  const permCopy = [...perms];
  const catgPerm = permCopy?.filter(function (perm) {
    return perm.catg === catg;
  });
  const catgServs = perms?.servs;
  catgServs.map((serv, index) => {
    const updatedServ = { ...serv, checked: true };
    catgServs[index] = updatedSer;
  });
  }
  setPerms(permCopy);

The screen is not re-rendering and it does not reflect the updated check boxes. I suspect the state variable is not getting updated.

The data looks like this:

perms = [
  {
    catg: 'Catg1',
    servs: [
      { 
        desc: 'Serv1',
        checked: false,
      },
      { 
        desc: 'Serv2',
        checked: false,
      },
      { 
        desc: 'Serv3',
        checked: false,
      }
    ]
  },
  {
    catg: 'Catg2',
    servs: [
      { 
        desc: 'Serv4',
        checked: false,
      },
      { 
        desc: 'Serv5',
        checked: false,
      },
      { 
        desc: 'Serv6',
        checked: false,
      }
    ]
  }
]

Can you update the question to include an actual representation of the data in perms, and specifically what the new data should be? It looks like you're generally confused on the structure of your data, and the structure shown is more of a general description of the data than an actual example. — David
– David, Commented May 29 at 15:50

sparkJ · Accepted Answer · 2025-06-05 12:27:38Z

1

".filter" does not mutate the original array, it returns a new array. after calling filter, you are editing properties on a copy of "permCopy", then returning the original. instead, you could map directly off of perms or permCopy.

const result = perms.map(x => {
    // return items if not in selected category
    if (x.catg != catg) { return x; }
    // else set "checked" to true
    return {
        ...x,
        servs: x.servs.map(s => ({
            ...s,
            checked: true,
        }))
    }
})
setPerms(result)

you could still use filter if that makes more sense to use, just know that it is copying your array.

EDIT: removed unnecessary "slice" call (thx @pilchard)

edited Jun 5 at 12:27

answered May 29 at 17:49

sparkJ

3631 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pilchard May 30 at 8:13

no need to slice() as map returns a new array anyway.

Drew Reese · Accepted Answer · 2025-05-30 06:26:11Z

Issues

The code creates a new catgPerm array filtered from the perms state, via permCopy, but then never uses it.
perms is an array, so perm?.servs/catgServs appears to likely be undefined.
If somehow catgServs is actually defined, the code runs the Array.map function but doesn't return new mapped values nor does it save the mapped result. Instead, the map callback is mutating the catgServs array elements.
The code then finally enqueues a state update of the original shallow copy permCopy which hasn't any updates at all.

// Shallow copy of perms array
const permCopy = [...perms];

// Filtered copy of permCopy, never referenced again
const catgPerm = permCopy?.filter(function (perm) {
  return perm.catg === catg;
});

// Direct reference to whatever perms.servs is
// Maybe this was supposed to be `catgPerm[0]?.servs` 🤷🏻‍♂️
const catgServs = perms?.servs;

// Mutations in mapping callback
catgServs.map((serv, index) => {
  const updatedServ = { ...serv, checked: true };
  catgServs[index] = updatedSer;
});

// Save the shallow copy of perms array back into state
setPerms(permCopy);

Solution Suggestion

Use a functional state update to correctly update from the current state.
Map the perms array to a new array reference and shallow copy all array elements.
For the matching perms element by catg property, you will create a new object reference and shallow copy its properties.
Create a new servs array property where each element is a new object reference, setting the checked property to true.
Using type any in Typescript is about the least helpful thing you can do; implement and use a basic interface.

interface Serv {
  checked: boolean;
  desc: string;
}

interface Perm {
  catg: string;
  servs: Serv[];
}

const [perms, setPerms] = useState<Perm[] | null>(null);

const handleClick = (
  event: React.MouseEvent,
  catg: string
) => {
  setPerms(perms => perms.map(           // <-- shallow copy perms array
    perm => perm.catg === catg
      ? {                                // <-- new "Perm" object reference
        ...perm,
        servs: perm.servs.map(serv => ({ // <-- shallow copy servs array
          ...serv,                       // <-- new "Serv" object reference
          checked: true
        }))
      }
      : perm                             // <-- non-updated "Perm" object
  ));
}

Collectives™ on Stack Overflow

Not updating state variable which is array of objects

2 Answers 2

1 Comment

Issues

Solution Suggestion

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Issues

Solution Suggestion

Comments

Your Answer

Sign up or log in

Post as a guest

Related