Change header style for expanded Panel of Accordion in React Bootstrap

Question

For the clicked and active/expanded panel I would like to change the css style. That's because I would like to toggle an image arrow that points up or down inside the header of the panel.

I'm able to get the eventKey of the open panel, but I'm not able to reach the DOM element with the panel-heading css class.

What do you suggest?

Thanks

Code below

<Accordion onSelect={this.handleSelect} >
  <Panel header="Collapsible Group Item #1" eventKey="1">
    Ad vegan
  </Panel>
  <Panel header="Collapsible Group Item #2" eventKey="2">
    Cliche docet
  </Panel>
</Accordion>

That becomes

    <div role="tablist" class="panel-group">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 role="presentation" class="panel-title"><a role="tab" aria-expanded="false" aria-selected="false">Collapsible Group Item #1</a></h4></div>
            <div role="tabpanel" class="panel-collapse collapse" aria-hidden="true" style="height: 0px;">
                <div class="panel-body">
                    <!-- react-text: 36 -->Ad vegan
                    <!-- /react-text -->
                </div>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h4 role="presentation" class="panel-title"><a role="tab" aria-expanded="false" aria-selected="false">Collapsible Group Item #2</a></h4></div>
            <div role="tabpanel" class="panel-collapse collapse" aria-hidden="true" style="height: 0px;">
                <div class="panel-body">
                    <!-- react-text: 43 -->Cliche docet
                    <!-- /react-text -->
                </div>
            </div>
        </div>
    </div>

Answer 1

The React Bootstrap Panel accepts a node to use as a header (per: https://github.com/react-bootstrap/react-bootstrap/blob/v0.20.1/src/Panel.js#L144 and http://react-bootstrap.github.io/components.html#panels-props), so you can pass in something with the appropriate onClick handler to it as a header, perhaps something like:

<Accordion onSelect={this.handleSelect} >
  <Panel header={<div onClick={() => {console.log('Clicked')}}>"Collapsible Group Item #1"</div} eventKey="1">
    Ad vegan
  </Panel>
  <Panel header="Collapsible Group Item #2" eventKey="2">
    Cliche docet
  </Panel>
</Accordion>

Answer 2

I solved a similar issue by building 2 react components: one to create the PanelGroup and another to create each Panel item within the group. Then in the Panel item component I wrote a custom handler for the toggle onClick event that set the 'expanded' property of the Panel to the component's state. By using the state of the custom component I was able to keep the state of each toggle icon separate.

Custom Panel Group Component:

import CustomPanelGroupItem from './CustomPanelGroupItem';
import React from 'react';
import PanelGroup from 'react-bootstrap/lib/PanelGroup';

class CustomPanelGroup extends React.Component {
    render() {
        return (
            <PanelGroup 
                accordion 
                id='custom-panel-group-accordion'
            >
                {
                    PanelGroupData.map((item, key) => {
                        return (
                            <CustomPanelGroupItem
                                eventKey={key}
                                customPanelGroupItem={item}
                            />
                        )
                    })
                }                

            </ PanelGroup>
        )
    }
}

export default CustomPanelGroup;

Custom Panel Component:

import Col from 'react-bootstrap/lib/Col';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faAngleDown, faAngleRight } from '@fortawesome/free-solid-svg-icons'
import Grid from 'react-bootstrap/lib/Grid';
import React from 'react';
import Panel from 'react-bootstrap/lib/Panel';

class CustomPanelGroupItem extends React.Component {
    state = {
        expanded: false,
        toggleIcon: faAngleRight
    }

    handleToggle = () => {
        this.setState({
            expanded: !this.state.expanded,
            toggleIcon: this.state.expanded ? faAngleRight : faAngleDown
        });
    }

     render() {
        return (
            <Panel 
                eventKey={this.props.eventKey}
                expanded={this.state.expanded}
            >
                <Panel.Heading >
                    <Panel.Toggle 
                        componentClass='div'
                        onClick={this.handleToggle}
                    >
                        {/* Code here for the panel toggle */} 
                    </Panel.Toggle>                 
                </Panel.Heading>
                <Panel.Body collapsible>
                    {/* Code here for the panel body */}
                </Panel.Body>
            </Panel>
        )
    }
}

export default CustomPanelGroupItem;