accordion_4_expandAll.js

class Accordion extends Component {
    constructor(props) {
        super(props);
        let state = {openedHash: {}};

        Children.toArray(props.children).forEach(child => {
            if (child){
                state.openedHash[child.props.name] = !!child.props.defaultOpen
            }
        });
        
        this.state = state;
    }
    expandAll = () =>{
        let {openedHash} = this.state;
        Object.keys(openedHash).forEach(k => openedHash[k] = true);
        this.setState({openedHash});
    }
    collapseAll = () =>{
        let {openedHash} = this.state;
        Object.keys(openedHash).forEach(k => openedHash[k] = false);
        this.setState({openedHash});
    }    
    onToggle = name => {
        let openedHash = this.state.openedHash;
        this.setState({openedHash: {...openedHash, [name]: !openedHash[name]}});
    }
    render() {
        let {openedHash} = this.state;
        let {children} = this.props;
        return (
            <div>
                <button onClick={this.expandAll}>Expand All</button>
                <button onClick={this.collapseAll}>Collapse All</button>
                {Children.toArray(children).filter(c => c).map(child => cloneElement(child, {
                    expanded: openedHash[child.props.name],
                    onToggle: this.onToggle
                }))}
            </div>
        );
    }
}