accordion_1_usage.js

import React, { Children, Component, cloneElement} from 'react';
import Collapse from 'react-collapse';

export default class RunAccordion extends Component {
    state = {xShown: false, yShown: false};
    addX = () => this.setState({xShown: true});
    addY = () => this.setState({yShown: true});
    removeX = () => this.setState({xShown: false});
    removeY = () => this.setState({yShown: false});

    render(){
        return (
            <div style={{margin: '70px'}}>
                <button onClick={this.addX}>Add X</button>
                <button onClick={this.addY}>Add Y</button>
                <button onClick={this.removeX}>Remove X</button>
                <button onClick={this.removeY}>Remove Y</button>
                <br />

                <Accordion>
                    <AccordionItem name="a" caption="Pane A">
                        <h3>This is pane a</h3>
                    </AccordionItem>
                    <AccordionItem defaultOpen={true} name="b" caption="Pane B">
                        <h3>This is pane b</h3>
                    </AccordionItem>
                    <AccordionItem name="c" caption="Pane C">
                        <h3>This is pane c</h3>
                    </AccordionItem>
                    {this.state.xShown ? 
                        <AccordionItem defaultOpen={true} name="x" caption="Pane X">
                            <h3>This is pane x</h3>
                        </AccordionItem> : null
                    }
                    {this.state.yShown ? 
                        <AccordionItem name="y" caption="Pane Y">
                            <h3>This is pane y</h3>
                        </AccordionItem> : null
                    }
                </Accordion>
            </div>
        );
    }
}