Immutable Update React Hooks Array Object

Question

I succesfully change the menu state, with hooks but...

  const [menu, setMenu] = useState([
    {
      parent: 'User',
      permission: false,
      children:[
        {name: 'Vendor', permission: false, readonly: true},
        {name: 'Client', permission: false, readonly: true},
        {name: 'User', permission: false, readonly: true},
      ]
    }
  ]);

  const toggleParent = (key) => {
    let data = {...menu};
    data[key].permission = !data[key].permission
    setMenu(data);
  };

end up getting error in mapping function, it says:

menu.map is not a function

here is the mapping function:

                  {menu.map((value, key) => (
                    <Switch
                      checked={value.permission}
                      onChange={() => toggleParent(key)}
                      color="primary"
                      name="checkedB"
                      inputProps={{ 'aria-label': 'primary checkbox' }}
                    />
                  ))}

norbitrial · Accepted Answer · 2020-03-23 09:58:13Z

2

I think the issue is coming from {...menu}. Usually this error happens when you call .map() not on an array. You need to have an [] instead.

Try the following:

const toggleParent = (key) => {
    let data = [...menu];
    data[key].permission = !data[key].permission;
    setMenu(data);
};

I hope this helps!

answered Mar 23, 2020 at 9:58

norbitrial

15.2k10 gold badges39 silver badges66 bronze badges

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

Comments

Muhammad Haseeb · Accepted Answer · 2020-03-23 10:03:30Z

1

There is a problem in your code, Your menu is an array and your are assigning it an object and using a map over it.

Here is the correct way of doing this.

const toggleParent = (key) => {
    let data = [...menu];
    data[key].permission = !data[key].permission
    setMenu(data);
  };

answered Mar 23, 2020 at 10:03

Muhammad Haseeb

1,3611 gold badge12 silver badges24 bronze badges

Collectives™ on Stack Overflow

Immutable Update React Hooks Array Object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related