class CategoryAccordion extends React.Component {
constructor(props) {
super(props);
this.state = {
active: false
}
}
toggle(e){
this.setState({active: !this.state.active});
}
render() {
return (
<Accordion activeKey={this.state.activeKey} onSelect={onSelectHandler}>
{
this.root.map((item, index) => {
const children = this.props.categories.filter((subItem) => (subItem.parentId == item.id)).sort(this.sortCategory);
return (
<Card key={index} className={(this.state.active ? "active" : "")} onClick={e => this.toggle(e)}>
<Accordion.Toggle as={Card.Header} eventKey={index} >
{item.name}
</Accordion.Toggle>
<Accordion.Collapse eventKey={index}>
<Card.Body>
<ListGroup className={"list-group-flush"}>
{
children.length == 0 &&
<CategoryLink item={item} currentItem={this.props.currentCategory}/>
}
{
children.length > 0 &&
children.map((subItem, index) => (
<CategoryLink item={subItem} currentItem={this.props.currentCategory} key={index}/>
))
}
</ListGroup>
</Card.Body>
</Accordion.Collapse>
</Card>
)
}
)
}
</Accordion>
)
}
}
export default CategoryAccordion;