Show/hide List.accordion with button with react-native?

Question

I have a react-native app. And I try to toggle a List.Accorion. I have some cards. And on every card there is a icon. And if a user triggers the icon then the List.Accorion has to be shown or hidden. But the current situation is that if a user triggers the icon all the List.Accorions from every card will be hidden or shown. What not correct is.

So this is the code:

const [breakfastExpanded, setBreakfastExpanded] = useState(false);
const [showAccordion, setShowAccordion] = useState(false);

const toggleAccordion = () => {
        setShowAccordion(!showAccordion);
    };


    <CategoryList
                data={categoryList}
                renderItem={({ item }) => {
                    return (
                        <>
                            <TouchableOpacity
                                onPress={() => navigation.navigate("groepen", { subcategories: item.id })}>
                                <Spacer position="top" size="large">
                                    <CategoryInfoCard category={item} />
                                </Spacer>
                            </TouchableOpacity>
                            <View>
                                <ButtonDetail onPress={toggleAccordion}>
                                    <AntDesign name="twitter" size={24} color="green" />
                                </ButtonDetail>
                            </View>
                            {showAccordion && (
                                <List.Accordion
                                    title="Description"
                                    left={(props) => <List.Icon {...props} icon="bird" />}
                                    expanded={breakfastExpanded}
                                    onPress={() => setBreakfastExpanded(!breakfastExpanded)}>
                                    <List.Item title={item.description} />
                                </List.Accordion>
                            )}                          
                            
                        </>
                    );
                }}
                keyExtractor={(item) => item.id}
            />

Question: how to hide/show the List.Accorion only where the icon is triggered?

I have it now like:

export const CategoryScreen = ({ navigation }) => {
    const { loading, categoryList } = useContext(CategoryContext);
    const [breakfastExpanded, setBreakfastExpanded] = useState(false);
    const [showAccordion, setShowAccordion] = useState([]);

    const toggleAccordion = (id) => {
        if (showAccordion.includes(id)) {
            console.log(showAccordion);
            let UpdateIds = [...showAccordion];
            UpdateIds = UpdateIds.filter((ID) => ID !== id);
            setShowAccordion(UpdateIds);
        } else {
            let UpdateIds = [...showAccordion];
            UpdateIds.push(id);
            setShowAccordion(UpdateIds);
        }
    };

    return (
        <SafeArea>
            {loading && (
                <LoadingContainer>
                    <ActivityIndicator animating={true} color={MD2Colors.green200} />
                </LoadingContainer>
            )}
            <Search />
            <CategoryList
                data={categoryList}
                renderItem={({ item }) => {
                    return (
                        <>
                            <TouchableOpacity
                                onPress={() => navigation.navigate("groepen", { subcategories: item.id })}>
                                <Spacer position="top" size="large">
                                    <CategoryInfoCard category={item} />
                                </Spacer>
                            </TouchableOpacity>
                            <View>
                                <ButtonDetail onPress={toggleAccordion(item.id)}>
                                    <AntDesign name="twitter" size={24} color="green" />
                                </ButtonDetail>
                            </View>
                            {showAccordion.includes(item.id) && (
                                <List.Accordion
                                    title="Description"
                                    left={(props) => <List.Icon {...props} icon="bird" />}
                                    expanded={breakfastExpanded}
                                    onPress={() => setBreakfastExpanded(!breakfastExpanded)}>
                                    <List.Item title={item.description} />
                                </List.Accordion>
                            )}
                        </>
                    );
                }}
                keyExtractor={(item) => item.id}
            />
        </SafeArea>
    );
};

Waleed Nasir · Accepted Answer · 2023-03-28T10:25:32.733

1

Try this

const AppRoot = () => {
  const [breakfastExpanded, setBreakfastExpanded] = useState(false);
  const [showAccordion, setShowAccordion] = useState([]);

  const toggleAccordion = (id) => {
    if (showAccordion.includes(id)) {
      let UpdateIds = [...showAccordion]
      UpdateIds = UpdateIds.filter((ID) => ID != id)
      setShowAccordion(UpdateIds)
    } else {
      let UpdateIds = [...showAccordion]
      UpdateIds.push(id)
      setShowAccordion(UpdateIds)
    }
  };


  return (<CategoryList
    data={categoryList}
    renderItem={({ item }) => {
      return (
        <>
          <TouchableOpacity
            onPress={() => navigation.navigate("groepen", { subcategories: item.id })
            }>
            <Spacer position="top" size="large" >
              <CategoryInfoCard category={item} />
            </Spacer>
          </TouchableOpacity>
          <View >
            <ButtonDetail onPress={() => toggleAccordion(item.id)}>
              <AntDesign name="twitter" size={24} color="green" />
            </ButtonDetail>
          </View>
          {
            showAccordion.includes(item.id) && (
              <List.Accordion
                title="Description"
                left={(props) => <List.Icon {...props} icon="bird" />}
                expanded={breakfastExpanded}
                onPress={() => setBreakfastExpanded(!breakfastExpanded)}>
                <List.Item title={item.description} />
              </List.Accordion>
            )}

        </>
      );
    }}
    keyExtractor={(item) => item.id}
  />)


};

edited Mar 28 '23 at 10:25

answered Mar 28 '23 at 07:13

Waleed Nasir

579
5
9

#Waleed Nasir.Thank you for your contribution. See my update. – mightycode Newton Mar 28 '23 at 07:28
#Waleed Nasir.includes is not a function – mightycode Newton Mar 28 '23 at 07:51
let me check wait a mint – Waleed Nasir Mar 28 '23 at 10:21
Hey i fixed it , change this UpdateIds = UpdateIds.push(id) to UpdateIds.push(id) also i updated the my answer – Waleed Nasir Mar 28 '23 at 10:26
#Waleed Nasir. Thank you!! So your solution is keeping track of the card id? – mightycode Newton Mar 28 '23 at 12:38
##Waleed Nasir. Hi Nasir. Do you have any idea how to show full content in the List.Acordion? So with multiple text rows? – mightycode Newton Mar 28 '23 at 13:51
@mightycodeNewton sorry for late but yes its tracking Card id for now but you can change/use map index number and i know that we will do this also you need any kind of help you can contact me on email waleednasir676@gmail.com thanks – Waleed Nasir Apr 04 '23 at 07:45

Show/hide List.accordion with button with react-native?

1 Answers1