Toggle an array item in react native?

Question

This is basically a map that has building icons and when you tap on a building, it shows information for that building. I am struggling with logic for toggling individual items(buldings) in my array. Like only displaying building 1 for example. So when I tap on a Marker it should show the correct building in the array. I am showing partial code for mapscreen.js but will share all if needed.

Buildings.js

export const buildings = [
  {
    name: "Building1",
    description: "This is some information",
    xp: 25,
  },
  {
    name: "Building2",
    description: "This is some information.",
    xp: 25,
  },
];

Mapscreen.js

const [visible, setVisible] = useState(false);

//MAP THROUGH ARRAY, PASS ARRAY ITEMS AS PROPS TO OVERLAY COMPONENT 

const myBuilding = buildings.map((building, i) => (
    <OverlayBox key={i} title={building.name} info={building.description} xp={building.xp} />
  ));
  const toggleOverlay = () => {
    setVisible(!visible);
  };

return (
    <View>
      <Overlay isVisible={visible} onBackdropPress={toggleOverlay}>
        {myBuilding}**<--------DISPLAYS BOTH BUILDINGS RIGHT NOW**
      </Overlay>

      <Marker
          onPress={toggleOverlay}**<--------WANT TO DISPLAY BUILDING 1**
          coordinate={{ latitude: 34.0198536, longitude: -80.923467 }}
          title={"Building1"}
          description={"25 XP"}
        />
      <Marker
          onPress={toggleOverlay}**<--------WANT TO DISPLAY BUILDING 2**
          coordinate={{ latitude: 34.0195536, longitude: -80.924467 }}
          title={"Building2"}
          description={"25 XP"}
        />
</View>

BloodyMonkey · Accepted Answer · 2021-04-06 14:44:53Z

1

Your approach is a bit weird

I suggest you:

Make only one OverlayBox
Pass to toggleOverlay the index of your building like

<Marker onPress={() => toggleOverlay(0)}
Set the visible building index in state like

const toggleOverlay = (index) => { setVisibleBuilding(index); ... };
And pass the building to your OverlayBox like

<OverlayBox building={buildings[visibleBuildingIndex]} ... />

answered Apr 6, 2021 at 14:44

BloodyMonkey

1,6731 gold badge11 silver badges16 bronze badges

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

4 Comments

lache Over a year ago

I am updating my code, are you saying in step one I don't really need to map through? just render one overlay right, also what is visiblebuildingIndex?

lache Over a year ago

I updated it some but not sure if going in right direction? (posted below previous code)

lache Over a year ago

Managed to fix, I will post my solution if needed.

BloodyMonkey Over a year ago

You're in the right way, no need to make more than one overlaybox but you can map buildings to generate your markers dynamically, just store coordinates, color and wathever in buildings array and finally be sure of setting building index before rendering your OverlayBox

lache · Accepted Answer · 2021-04-06 16:32:03Z

//ANSWER
  const [visibleBuilding, setVisibleBuilding] = useState(0);
  const buildings = [
    {
      name: "Building1",
      description:
        " This is some information.",
      xp: 25,
    },
    {
      name: "Building2",
      description: "This is some information.",
      xp: 25,
    },
  ];
  const [visible, setVisible] = useState(false);

  const toggleOverlay = () => {
    setVisible(!visible);
  };

  return (
    <View style={{ flex: 1 }}>
      <Overlay isVisible={visible} onBackdropPress={toggleOverlay}>
        <OverlayBox
          building={buildings[visibleBuilding]}
          onPress={() => toggleOverlay()}
          key={visibleBuilding}
          title={buildings[visibleBuilding].name}
          info={buildings[visibleBuilding].description}
          xp={buildings[visibleBuilding].xp}
        />
      </Overlay>
        <Marker
          onPress={() => {
            toggleOverlay();
            setVisibleBuilding(0);
          }}
          coordinate={{ latitude: 34.0198536, longitude: -80.923467 }}
          pinColor="maroon"
          title={"Rutledge"}
          description={"25 XP"}
        />
        

        <Marker
          onPress={() => {
            toggleOverlay();
            setVisibleBuilding(1);
          }}
          coordinate={{ latitude: 34.0195536, longitude: -80.924467 }}
          pinColor="maroon"
          title={"Swearingen Engineering Center"}
          description={"25 XP"}
        />
       
    </View>
  );

Collectives™ on Stack Overflow

Toggle an array item in react native?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related