How to toggle Boolean Value in nested Array of Objects Javascript

Question

I'm trying to handle SectionList data and I want to change the value when I click on the respective item. Here is the data example

const Person = [
    {
        firstname: "john",
        lastname: "doe",
        items: [
            {
                visible: true,
                foo: "bar"
            },
            {
                visible: false,
                foo: "bar"
            }
        ]
    },
        {
        firstname: "jane",
        lastname: "doe",
        items: [
            {
                visible: false,
                foo: "bar"
            }
        ]
    },
    {
        firstname: "john",
        lastname: "adam",
        items: [
            {
                visible: true,
                foo: "bar"
            },
            {
                visible: false,
                foo: "bar"
            }
        ]
    },
]

let's discuss its first object.If I press on it which is on items[0] in the design part visible value should be false and I press item[1] now visible of this should be true and item[0]'s visible should be false and If I move to other index objects then same thing should happen but previously changed values should remain there. Thanks. Here is the code I did so far

    let arr = Person?.map((elem) => {
         
          return {
            ...elem,
           
            items: elem?.items?.map(i => {
              if (i.id == item.id) {
                i.visible=false
                return {
                  ...i,
                  visible: !i.visible,
                };
              }
              return i;
            }),
          };
        });

Answer 1

This may help you.

toggle = (parentItemID, childItemID) => {
  yourArray.map((elem) => {
   if (elem.id === parentItemID) {
    return {
     ...elem,
     item: item.map((item) => {
      item.visible = false
      if (item.id === childItemID) {
      
       return {
        ...item,
        visible: !item.visible,
       };
      }
      return item;
     }),
    };
   }
   return elem;
  });
 };