react-bootstrap Accordion not collapsing with map

Question

I have an array of items I would like to create Panels out of which would eventually be inserted into the Accordion.

In one file, I have:

var items = this.state.contents.map(function(content, index) {
  return <Content {...content}, key={index}/>
};

return (
  <Accordion>
    {items}
  </Accordion>
);

In another file called Content I have:

return(
  <Panel header={this.props.header} eventKey={this.props.key}>
    {this.props.body}
  </Panel>
);

When I have the Accordion and Panel in the same file, they work. But when I generate the Panel using map after splitting them into two files, it doesn't seem to collapse.

Answer 1

Here is the solution

<Accordion>
  {this.item.map(item =>
     <AcPanel key={item.id} item={item} eventKey={item.id} />
  )}
</Accordion>

In AcPanel Class use {...this.props} for fetch all properties and assign values on your parent class like i used "eventKey={item.id}".

<Panel header={`Collapsible Group Item`} bsClass='class-name' {...this.props}>
content here
</Panel>