Toggle Boolean status of Nested Objects: JavaScript

Question

How do I toggle the status of an object based on checked or unchecked. Here newState[id] = !newState[id] works with 1st level objects. But if the objects are nested it doesn't work.

So, I am trying to use the key property if (id == 'z.aa') newState.z.aa = !newState.z.aa;. However, if there are 100 nested objects, this approach will not be feasible.

Please help me with this toggle of nested objects. Thanks.!

const function App() {
  let [state, setState] = useState({
    a: false,
    z: { aa: false, bb: false },
  });

  const handler = (e) => {
    let id = e.target.id;
    let newState = JSON.parse(JSON.stringify(state));
    if (id == 'z.aa') newState.z.aa = !newState.z.aa;
    else if (id == 'z.bb') newState.z.bb = !newState.z.bb;
    else newState[id] = !newState[id];
    setState(newState);
  };
  return (
    <div onClick={(e) => handler(e)}>
      <input type="checkbox" id="a" checked={state.a} />
      all
      <input type="checkbox" id="z.aa" checked={state.z.aa} />A
      <input type="checkbox" id="z.bb" checked={state.z.bb} />B
    </div>
  );
}

Skul · Accepted Answer · 2022-11-06 12:42:28Z

1

I think you can try Lodash .get and .set method

_.set(newState, id, !_.get(newState, id));

answered Nov 6, 2022 at 12:42

Skul

363 bronze badges

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

Collectives™ on Stack Overflow

Toggle Boolean status of Nested Objects: JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related