how to toggle item from nested array in react

Question

I am struck in nested array and need help: my data is:

Data: [{
    name: "Steel Support, Aviation Lights, Std", // match parent array name
    code: "450W0619P001",
    reserved: [{
        serial: "one",
        selected: false // toggle this
      },
      {
        serial: "two",
        selected: true, // toggle this
      },
    ],
  },
  {
    name: "Lock Nut, Prevailing Torque, M12x1.75m", // match parent array name
    code: "450W0619P001",
    reserved: [{
        serial: "one",
        selected: true // toggle this
      },
      {
        serial: "two",
        selected: true // toggle this
      },
      {
        serial: "three",
        selected: false // toggle this
      },
    ],
  },
]

const [erpParts, setErpParts] = useState(Data);

Here is my function to toggle nested array object state. I need to match parent array name and then toggle child array object value.

const selectPart = (parentArr, part) => {
  setErpParts(
    erpParts.map((x) => {
      if (x.name !== parentArr.name) return x;
      return { ...x,
        reserved: [...x.reserved, part.selected != part.selected]
      };
    })
  );
};

My function is not showing desired result. please look into this and help.

Soufiane Boutahlil · Accepted Answer · 2021-06-22 21:53:32Z

1

This line will create a copy of reserved array and will add a new value boolean false to the copy:

reserved: [...x.reserved, part.selected != part.selected]

You have to map every item inside your array and updates its property selected:

  const selectPart = (parentArr, part) => {
  setErpParts(erpParts =>
    erpParts.map(x => {
      if (x.name !== parentArr.name) return x
      else {
        const reservedUpdated = x.reserved.map(res => {
          if (res.serial === part.serial) {
            return {
              ...res,
              selected: !part.selected
            }
          } else {
            return res
          }
        })
        return {
          ...x,
          reserved: reservedUpdated
        }
      }
    })
  )
}

edited Jun 22, 2021 at 21:53

answered Jun 22, 2021 at 20:58

Soufiane Boutahlil

2,5941 gold badge9 silver badges13 bronze badges

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

7 Comments

Bhasker agrawal Over a year ago

Unfortunately it is not working. first time it is toggling the state but when I toggle again it toggled all objects of reserved array

Soufiane Boutahlil Over a year ago

So your goal is toggling one object instead all?

Soufiane Boutahlil Over a year ago

When you want to change the state using the old state like toggling you should use callback instead of an object, you can try the last version of my answer

Bhasker agrawal Over a year ago

still no luck :( I am seeing the same issue. this is how I am calling the function you mentioned:

<View>         {erpParts.map((part, i) => (           <View key={i}>             {part.reserved.map((currPart, i) => (               <View key={i}>                 <Text>{currPart.serial}</Text>                 <Text>{currPart.selected ? "true" : "false"}</Text>                 <Button onPress={() => selectPart(part, currPart)}>Toggle</Button>                 <Divider />               </View>             ))}           </View>         ))}       </View>

Bhasker agrawal Over a year ago

first time it works fine but when I try to toggle again it toggle whole reserved array objects.

|

Collectives™ on Stack Overflow

how to toggle item from nested array in react

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related