React Native Arrow Down or Arrow Right When Toggle Collapse - reactjs

Question

I want only my selected FAQ toggle arrow right will be change to arrow down. But for now my code will change All my FAQ arrow right to down when toggle call.
This is my code :
const renderItem = ({ item }, open, show) => {
return (
<View style={styles.container}>
<Collapse onToggle={() => show()}>
<CollapseHeader>
<View style={styles.section}>
<Text style={styles.question}>{item.question}</Text>
{open ? <AntDesign name="down" size={15} color="gray" /> : <AntDesign name="right" size={15} color="gray" />}
</View>
</CollapseHeader>
<CollapseBody>
<Text style={styles.answer}>{item.answer}</Text>
</CollapseBody>
</Collapse>
</View>
);
};
const FAQComponent = () => {
console.log('FAQComponent');
const [open, setOpen] = useState(false);
const show = () => {
setOpen(!open);
}
return (
<FlatList
data={Object.values(FAQData)}
renderItem={(item) => renderItem(item, open, show)}
keyExtractor={item => item.id}
initialNumToRender={10}
/>
);
};
This is the default layout arrow right:
And This is when one of FAQ collapse :
How do I make only selected FAQ when collapse the arrow change to down and the other remain same ?
Thank You.

Answer 1

const renderItem = (item, seletecdItem, show, index) => {
// Instead of Passing a Boolean pass a SelectedItem which holds the index of current selected index and verify it with that
return (
<View style={styles.container}>
<Collapse onToggle={() => show(index)}>
<CollapseHeader>
<View style={styles.section}>
<Text style={styles.question}>{item.question}</Text>
{seletecdItem === index ? (
<AntDesign name="down" size={15} color="gray" />
) : (
<AntDesign name="right" size={15} color="gray" />
)}
</View>
</CollapseHeader>
<CollapseBody>
<Text style={styles.answer}>{item.answer}</Text>
</CollapseBody>
</Collapse>
</View>
);
};
const FAQComponent = () => {
console.log('FAQComponent');
const [selectedItem, setSelectedItem] = useState(-1); // Change the useState to use number
const show = (index) => { // Pass Index through the callback and update the state
setSelectedItem(index);
};
return (
<FlatList
data={Object.values(FAQData)}
renderItem={{ item,index } => renderItem(item, selectedItem, show, index)} // Pass the Index along with renderItem
keyExtractor={item => item.id}
initialNumToRender={10}
/>
);
};