title: Programmatically collapse all react-accessible accordion panels
body: <p>I'm using a <a href="https://www.npmjs.com/package/react-accessible-accordion" rel="nofollow noreferrer">react-accessible-accordion</a> to present the user with a form one panel at a time. There is a &quot;Reset&quot; button that resets the impacts of any of the buttons the user may have pushed. The buttons are inside the panels. How do you programmatically collapse any open panels? There is the dangerouslySetExpanded option for an AccordionItem, but I don't see any practical examples of this being used or thorough documentation of the option (this is where that <a href="https://github.com/springload/react-accessible-accordion#dangerouslysetexpanding-boolean-optional" rel="nofollow noreferrer">option is described in the docs</a>). Do I have to use state variables here for the expanded-collapsed state of each item to be able to manipulate it programmatically? Here's a simplified version of the code I have now:</p>
  <pre><code>import React from 'react';
  import ToggleButton from &quot;react-bootstrap/ToggleButton&quot;;
  import ButtonGroup from &quot;react-bootstrap/ButtonGroup&quot;;
  import 'bootstrap/dist/css/bootstrap.min.css';
  import {Accordion, AccordionItem, AccordionItemHeading, AccordionItemButton, AccordionItemPanel} from 'react-accessible-accordion';
  
  
  export const AccordionComponent = props =&gt; {
    stateHooks = [React.useState(-1), React.useState(-1)]
    const [ [varA, setVarA], [varB, setVarB] ] = stateHooks
    
    const handleResetAccordion = e =&gt; {
      e.preventDefault();
      stateHooks.forEach(hook =&gt; {  // pass -1 to each setter
        hook[1]('-1');  // index 1 contains the setter
      })
    }
  
    return (
      &lt;div className=&quot;accordion_container&quot;&gt;
        &lt;Accordion allowZeroExpanded={true}&gt;
          &lt;AccordionItem&gt;
            &lt;AccordionItemHeading&gt;
              &lt;AccordionItemButton&gt; Panel #1 Title &lt;/AccordionItemButton&gt;
            &lt;/AccordionItemHeading&gt;
            &lt;AccordionItemPanel&gt;
              &lt;div className='radioQuestionCard'&gt;
                &lt;h3&gt;Question #1 Prompt:&lt;/h3&gt;
                &lt;ButtonGroup className='radio' toggle id='q1'&gt;
                  &lt;ToggleButton key='0' type=&quot;radio&quot; name=&quot;q1&quot; value='0' checked={varA === '0'}
                    onChange={e =&gt; setVarA(e.currentTarget.value)} &gt; Q1: Option1
                  &lt;/ToggleButton&gt;
                  &lt;ToggleButton key='1' type=&quot;radio&quot; name=&quot;q1&quot; value='1' checked={varA === '1'}
                    onChange={e =&gt; setVarA(e.currentTarget.value)} &gt; Q1: Option2
                  &lt;/ToggleButton&gt;
                &lt;/ButtonGroup&gt;
              &lt;/div&gt;
            &lt;/AccordionItemPanel&gt;
          &lt;/AccordionItem&gt;
          &lt;AccordionItem&gt;
            &lt;AccordionItemHeading&gt;
              &lt;AccordionItemButton&gt; Panel #2 Title &lt;/AccordionItemButton&gt;
            &lt;/AccordionItemHeading&gt;
            &lt;AccordionItemPanel&gt;
              &lt;div className='radioQuestionCard'&gt;
                &lt;h3&gt;Question #2 Prompt:&lt;/h3&gt;
                &lt;ButtonGroup className='radio' toggle id='q2'&gt;
                  &lt;ToggleButton key='0' type=&quot;radio&quot; name=&quot;q2&quot; value='0' checked={varB === '0'}
                    onChange={e =&gt; setVarB(e.currentTarget.value)} &gt; Q2: Option1
                  &lt;/ToggleButton&gt;
                  &lt;ToggleButton key='1' type=&quot;radio&quot; name=&quot;q2&quot; value='1' checked={varB === '1'}
                    onChange={e =&gt; setVarB(e.currentTarget.value)} &gt; Q2: Option2
                  &lt;/ToggleButton&gt;
                &lt;/ButtonGroup&gt;
              &lt;/div&gt;
            &lt;/AccordionItemPanel&gt;
          &lt;/AccordionItem&gt;
        &lt;/Accordion&gt;
        &lt;button className='btn btn-danger btn-sm'
          onClick={handleResetAccordion} id='resetAccordion'&gt; Reset
        &lt;/button&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>