React bootstrap panel custom heading- Expand collapse not working - reactjs

Question

I am trying to use React bootstrap panelgroup (Accordion)
I want a custom header with radio buttons. Hence i replaced header with my custom header. After using custom header, Expand collapse has stopped working.
Code (Custom header)
constructor(props) {
super(props);
this.state = {
isSelected: false,
};
}
componentWillMount () {
if (this.props.isSelected) {
this.state = {isSelected:true};
} else {
this.state = {isSelected: false};
}
}
componentWillUpdate () {
if (this.props.isSelected) {
this.state = {isSelected:true};
} else {
this.state = {isSelected: false};
}
}
render() {
let radio =
<span>
<input type="radio" className="accordion_checkbox" name={this.props.name} />
{this.props.header}
</span> ;
if (this.state.isSelected) {
radio = <span>
<input type="radio" className="accordion_checkbox" defaultChecked name={this.props.name} />
{this.props.header}
</span>
}
return (
<div>
{radio}
</div>
)
}
Panel:
<PanelGroup className="payment-accordion" activeKey={this.state.activeKey} onSelect={e => this.handleSelect(e)} accordion>
<Panel header={<PanelHeaderCustom name="saved_card" isSelected={this.state.activeKey === "savedCards"} header="SAVED CARD"/>} eventKey="savedCards">
<SwipableCards savedCards={this.props.savedCards}/>
</Panel>
<Panel header={<PanelHeaderCustom name="debit_card" isSelected={this.state.activeKey === "creditDebitCards"} header="DEBIT CARD"/>} eventKey="creditDebitCards">Debit/Credit Card</Panel>
<Panel header={<PanelHeaderCustom name="net_banking" isSelected={this.state.activeKey === "netbanking"} header="NET BANKING"/>} eventKey="netbanking">Debit/Credit Card</Panel>
</PanelGroup>
What am i missing?
Thanks in advance

Answer 1

When calling an element with JSX syntax, the generated object type doesn't have "children" as prop, and I think react-bootstrap Panel cannot handle that situation correctly.
<PanelHeaderCustom /> // returns Object { type: PanelHeaderCustom(), props: { header:"NET BANKING", isSelected: false, name: "net_banking" } }
Therefore, as a workaround, you could wrap your custom header to div in the Panel header prop:
class PanelHeaderCustom extends Component {
render () {
return (
<span>
<input
type='radio'
className='accordion_checkbox'
checked={this.props.isSelected}
name={this.props.name} />
{this.props.header}
</span>
)
}
}
export default class Test extends Component {
constructor (props) {
super(props)
this.state = {
activeKey: ''
}
}
handleSelect (e) {
this.setState({
activeKey: e
})
}
render () {
return (
<div>
<PanelGroup
className='payment-accordion'
activeKey={this.state.activeKey}
onSelect={(e) => this.handleSelect(e)}
accordion>
<Panel
header={
<div>
<PanelHeaderCustom
name='saved_card'
isSelected={this.state.activeKey === 'savedCards'}
header='SAVED CARD' />
</div>
}
eventKey='savedCards'>
<div>Example</div>
</Panel>
<Panel
header={
<div>
<PanelHeaderCustom
name='debit_card'
isSelected={this.state.activeKey === 'creditDebitCards'}
header='DEBIT CARD' />
</div>
}
eventKey='creditDebitCards'>
Debit/Credit Card
</Panel>
<Panel
header={
<div>
<PanelHeaderCustom
name='net_banking'
isSelected={this.state.activeKey === 'netbanking'}
header='NET BANKING' />
</div>
}
eventKey='netbanking'>
Debit/Credit Card
</Panel>
</PanelGroup>
</div>
)
}
}
ReactDOM.render(
<Test />,
document.getElementById('main')
)
As a side note, I think you should make your custom header a stateless component, because there is no point for the component to know it's own state. Just use props in the PanelHeaderCustom and control the instances with the main app's state.
When you make that component stateless, you can write your component's code a as a pure function without need for unnecessary div-wrapping:
// Returns { type: "span", props: { children: [ { type: "input"... }, "SAVED_CARD" ] } }
function PanelHeaderCustom (
header,
name,
isSelected
) {
return (
<span>
<input
type='radio'
className='accordion_checkbox'
checked={isSelected}
name={name} />
{header}
</span>
)
}
Then call the function in Panel's header prop:
<Panel
header={
PanelHeaderCustom(
'SAVED CARD',
'saved_card',
this.state.activeKey === 'savedCards'
)
}
eventKey='savedCards'>
<div>Example</div>
</Panel>