How to change icon depending on which array item is pressed in React Native?

Question

I have an array of details on a collapsible component, how can I change the icon chevron-down to chevron-up and vice versa depending on which item on .map() is pressed?

The problem is when I tap on an item all the icons of the other items changes with the state.

How to change state only for an item in array?

Here is my code:

const [iconName, setIconName] = useState("chevron-down")

    return (
        <AppScreen>
            <ScrollView style={styles.container}>
                {
                    terms.map((term, index) => {
                        return (
                            <Collapse
                                key={index}
                                style={styles.overlayContainer}
                                onToggle={() => iconName === "chevron-down" ? setIconName("chevron-up") : setIconName("chevron-down")}
                            >
                                <CollapseHeader style={styles.collapseHeaderStyle}>
                                    <View style={styles.collapseHeaderStyle}>
                                        <AppText style={styles.title}>{term.title}</AppText>
                                    </View>
                                    <AppIcon iconName={iconName} iconType="ionicon" iconColor={colors.secondary} />
                                </CollapseHeader>
                                <CollapseBody style={styles.collapseBody}>
                                    {
                                        terms[index].contents.map((content, index) => {
                                            return (
                                                <React.Fragment key={index} >
                                                    <AppText style={styles.content}>{content.content}</AppText>
                                                </React.Fragment>
                                            )
                                        })
                                    }
                                </CollapseBody>
                            </Collapse>
                        )
                    })
                }
            </ScrollView>
        </AppScreen >
    )

Answer 1

you need to modify the terms array and keep track of it. Accoriding to the value returned you can display the icon that you want. here is a basic example of how this can be achieved.

const [iconName, setIconName] = useState("chevron-down")
const [terms, setTerms] = useState([])


const handlePress = (index) => {
 const arr = [...terms]
 arr[index].collapsed = !arr[index].collapsed
 setTerms(arr)
}

return (
    <AppScreen>
        <ScrollView style={styles.container}>
            {
                terms.map((term, index) => {
                    return (
                        <Collapse
                            key={index}
                            style={styles.overlayContainer}
                            onToggle={() => handlePress(index)}
                        >
                            <CollapseHeader style={styles.collapseHeaderStyle}>
                                <View style={styles.collapseHeaderStyle}>
                                    <AppText style={styles.title}>{term.title}</AppText>
                                </View>
                                {/* Display the icon based on true or false */}
                                <AppIcon iconName={term.collapsed ? "chevron-down" : "chevron-up"} iconType="ionicon" iconColor={colors.secondary} />
                            </CollapseHeader>
                            <CollapseBody style={styles.collapseBody}>
                                {
                                    terms[index].contents.map((content, index) => {
                                        return (
                                            <React.Fragment key={index} >
                                                <AppText style={styles.content}>{content.content}</AppText>
                                            </React.Fragment>
                                        )
                                    })
                                }
                            </CollapseBody>
                        </Collapse>
                    )
                })
            }
        </ScrollView>
    </AppScreen >
)