0

So I have a screen in react-native in my android app for reporting faulty equipment on my university and I have a wierd issue with my accordion menu. I use it as a list of options for the type of broken equipment that I store and then send to the database. After testing I found out the acordion menu doesnt close even if I edit the function to change the state that should track if the menu shoudl be open or not. Anybody any ideas?

const [typeOfEquip, setTypeOfEquip] = useState('');
const [expanded, setExpanded] = React.useState(true);



const chooseType= (typ) =>{
setTypeOfEquip(typ);
handlePress();

}

const handlePress = () => setExpanded(!expanded);


<List.AccordionGroup>
          <List.Accordion
            title="Type of equipment"
            expanded={expanded}
            onPress={handlePress}
            id="1">
            <List.Item
              title="Svetla"
              onPress={() => {
                chooseType('Svetla');
              }}
            />
            <List.Item
              title="Stoličky"
              onPress={() => {
                chooseType('Stoličky');
              }}
            />
          </List.Accordion>
BananZabijak
  • 1
  • 1

1 Answers1

0

I guess you are having this issue because of default behaviour. In onPress of List.Accordion you are calling handlePress() and children of List.Accordion which is List.Item calling chooseType function. chooseType also calls handlePress function inside. Try adding e.preventDefault() to functions

const [typeOfEquip, setTypeOfEquip] = useState('');
const [expanded, setExpanded] = React.useState(true);



const chooseType= (e, typ) =>{
  e.preventDefault();
  setTypeOfEquip(typ);
  handlePress(); 
}

const handlePress = (e) => {
  e.preventDefault();
  setExpanded(!expanded);
}


<List.AccordionGroup>
          <List.Accordion
            title="Type of equipment"
            expanded={expanded}
            onPress={handlePress}
            id="1">
            <List.Item
              title="Svetla"
              onPress={(e) => {
                chooseType(e, 'Svetla');
              }}
            />
            <List.Item
              title="Stoličky"
              onPress={(e) => {
                chooseType(e, 'Stoličky');
              }}
            />
          </List.Accordion>
Evren
  • 4,147
  • 1
  • 9
  • 16
  • And what does the e mean? Or more specificaly where does the app get it from? The accordion is also from react native paper. Its also good to mention this is an android app I think. – BananZabijak May 16 '22 at 23:24