title: How can I toggle accordion panels individually using React Hooks?
body: <p>Currently, all accordion panels are being toggled simultaneously. I've tried passing in the index to the click handler, but no luck. How do I compare the current index with the current setActive variable to open and close accordion panels individually? The data I'm working with in production do not have unique ids which is why I'm using index. Thanks for any suggestions!</p>
  <p>demo: <a href="https://codesandbox.io/s/react-accordion-using-react-hooks-forked-fup4w?file=/components/Accordion.js:141-1323" rel="nofollow noreferrer">https://codesandbox.io/s/react-accordion-using-react-hooks-forked-fup4w?file=/components/Accordion.js:141-1323</a></p>
  <pre><code>const Accordion = (props) =&gt; {
    const [setActive, setActiveState] = useState(0);
    const [setHeight, setHeightState] = useState(&quot;0px&quot;);
    const [setRotate, setRotateState] = useState(&quot;accordion__icon&quot;);
  
    const content = useRef(null);
  
    const toggleAccordion = (index) =&gt; {
      setActiveState(setActive === index ? &quot;active&quot; : &quot;&quot;);
      setHeightState(
        setActive === &quot;active&quot; ? &quot;0px&quot; : `${content.current.scrollHeight}px`
      );
      setRotateState(
        setActive === &quot;active&quot; ? &quot;accordion__icon&quot; : &quot;accordion__icon rotate&quot;
      );
    }
  
    return (
      &lt;div&gt;
        {data.map((item, index) =&gt; (
          &lt;div key={index} className=&quot;accordion__section&quot;&gt;
            &lt;button
              className={`accordion ${setActive}`}
              onClick={() =&gt; toggleAccordion(index)}
            &gt;
              &lt;p className=&quot;accordion__title&quot;&gt;{item.title}&lt;/p&gt;
              &lt;Chevron className={`${setRotate}`} width={10} fill={&quot;#777&quot;} /&gt;
            &lt;/button&gt;
          &lt;div
            ref={content}
            style={{ maxHeight: `${setHeight}` }}
            className=&quot;accordion__content&quot;
          &gt;
            &lt;div&gt;{item.content}&lt;/div&gt;
         &lt;/div&gt;
      &lt;/div&gt;
      ))}
    &lt;/div&gt;
    );
  };
  </code></pre>