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;
            }),
          };
        });

i want to have max one true in each object of item.but if i toggle the other index value rest of the toggle done before reset — Zaid Qureshi
– Zaid Qureshi, Commented Jul 13, 2021 at 9:45
From where do you get the item.id of the expression if (i.id == item.id). Also you don't have i.id in your Person data. — Sajeeb Ahamed
– Sajeeb Ahamed, Commented Jul 13, 2021 at 9:52

Zaid Qureshi · Accepted Answer · 2021-07-13 11:47:21Z

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;
  });
 };

edited Jul 13, 2021 at 11:47

Zaid Qureshi

63711 silver badges21 bronze badges

answered Jul 13, 2021 at 9:55

Muhammad Ashfaq

2,5406 gold badges24 silver badges49 bronze badges

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

Collectives™ on Stack Overflow

How to toggle Boolean Value in nested Array of 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