CODEWITHSUNDEEP
javascriptreactjsreact-bootstrap
Wahidul Alam
Wahidul Alam

Reputation: 1253

React-Bootstrap accordion not working with map iteration

i have implemented the accordion according to the react-bootstrap documentation. Everything working fine except when one panel is clicked to expand other expanded panel are not closing. It's working fine without map iterator but with map its not working. My codes are given below:

Accordion.js

return (
   <div className="accordion-container">
       <h1>Accordion Component</h1>
          {posts.map(post =>
             <Section post={post} key={post.id} item={post.id.toString()}/>
         )}
   </div>
);

Section.js

class Section extends React.Component {
  constructor(props, context) {
    super(props, context);

    this.handleSelect = this.handleSelect.bind(this);

    this.state = {
      activeKey: "1"
    };
  }

  handleSelect(activeKey) {
    this.setState({ activeKey });
  }

  render() {
    console.log(this.props.item);
    return (
        <PanelGroup 
            accordion
            id="accordion-controlled-example"
            activeKey={this.state.activeKey}
            onSelect={this.handleSelect}
        >
            <Panel eventKey={this.props.item}>
                <Panel.Heading>
                    <Panel.Title toggle>{this.props.post.title}</Panel.Title>
                </Panel.Heading>
                <Panel.Body collapsible>
                    {this.props.post.body}
                </Panel.Body>
            </Panel>
        </PanelGroup>
    );
  }

}

Expert's help needed ..

Upvotes: 1

Views: 1397

Answers (1)

Tholle
Tholle

Reputation: 112777

Each Section consists of a PanelGroup with one Panel each in your code. If your instead use one single PanelGroup for all Panels, they will close automatically as expected.

Upvotes: 1

Related Questions