import ToggleGroup, { useToggleable } from 'react-toggleable-context';
function FirstComponent() {
    const { toggled, handleClick } = useToggleable('first');
    return (
        <div id={'first'}>
            <a id={'link'} onClick={handleClick}>
                Header
            </a>
            <div id={'section-body'} data-toggled={toggled ? 'true' : 'false'}>
                lorem
            </div>
        </div>
    );
}
function SecondComponent() {
    const { toggled, handleClick } = useToggleable('second');
    return (
        <div id={'second'}>
            <a id={'link'} onClick={handleClick}>
                Header
            </a>
            <div id={'section-body'} data-toggled={toggled ? 'true' : 'false'}>
                lorem
            </div>
        </div>
    );
}
function MyComponent(props) {
    return (
        <ToggleGroup>
            <FirstComponent />
            <SecondComponent />
        </ToggleGroup>
    );
}

import ToggleGroup from 'react-toggleable-context';
 
function MyComponent(props) {
    return (
        <ToggleGroup>
            <ToggleGroup.Section id={'first'}>
                {({ handleClick, toggled }) => (
                    <>
                        <a id={'link'} onClick={handleClick}>
                            Header
                        </a>
                        <div id={'section-body'} expanded={toggled ? 'true' : 'false'}>
                            lorem
                        </div>)
                    </>
                )}
            </ToggleGroup.Section>
            <ToggleGroup.Section id={'second'}>
                {({ handleClick, toggled }) => (
                    <>
                        <a id={'link'} onClick={handleClick}>
                            Header
                        </a>
                        <div id={'section-body'} expanded={toggled ? 'true' : 'false'}>
                            lorem
                        </div>)
                    </>
                )}
            </ToggleGroup.Section>
        </ToggleGroup>
    );
}