Toggle by index or id react native - reactjs

Question

I am pulling categories and sub categories from an API which is working as expected. I have them in an accordion using expanded:
constructor(props) {
super(props);
this.state = {
...
expanded : false,
}
}
Then rendering categories and sub categories:
renderFilter=()=> {
const items = [];
for (let item of this.state.docCats) {
if( item.subCats) {
docItems = item.subCats.map(row => {
return<TouchableOpacity key={row.doc_sc_id} onPress={()=>this.FilterRequest(item.doc_cat_id, row.doc_sc_id)}><Text style={styles.filterCat}>{row.doc_sc_title}</Text></TouchableOpacity>
})
}
items.push(
<View key={item.doc_cat_id}>
<TouchableOpacity onPress={()=>this.FilterRequest(item.doc_cat_id, '')}>
<Text style={styles.filterCat}>{item.doc_cat_title}</Text>
</TouchableOpacity>
<TouchableOpacity onPress={()=>this.toggleExpand()}>
<FontAwesome name={this.state.expanded ? 'chevron-up' : 'chevron-down'} size={20} color="#000" />
</TouchableOpacity>
{this.state.expanded &&
docItems
}
</View>
);
}
return items;
}
using a Toggle:
toggleExpand=()=>{
this.setState({expanded : !this.state.expanded})
}
My problem is when i use the toggleExpand it expands all the accordions at the same time. Is there a way i can open them individually by targetting the index or id?
I would prefer not to use a different class/component as i need access to the other functions and fetch requests that i have.

Answer 1

You should add a property to each docCats item that indicates whether its accordion should be expanded or not, then pass an id to the toggleExpand function to update this property for a specific item and the docCats array that's stored in your state. Use the expanded property of each item inside of the renderFilter function to indicate whether the accordion should be expanded or not.
Here's a simplified example, but should give you a good idea how to rewrite your code to make it work:
const items = Array.from({ length: 5 }).map((_, idx) => ({
id: idx,
title: `Accordion ${idx + 1}`
}));
class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
items: items.map(item => ({
...item,
expanded: false
}))
};
}
toggleExpand = id => {
const nextItems = [...this.state.items].map(item => {
if (item.id === id) {
return {
...item,
expanded: !item.expanded
};
}
return item;
});
this.setState({
items: nextItems
});
};
renderFilter = () => {
return this.state.items.map(item => (
<div
style={{ border: `1px solid black`, width: `100`, height: `100` }}
onClick={() => this.toggleExpand(item.id)}
key={item.id}
>
<p>
{item.title} {item.expanded ? `is expanded` : `is not expanded`}
</p>
</div>
));
};
render() {
const renderedFilter = this.renderFilter();
return <div>{renderedFilter}</div>;
}
}
If you'd like to see it in action, simply click on each box to change the expanded state, here's the link to a working demo:
CodeSandbox