title: How to check if parent element include children with spesific class with useEffect and UseRef?
body: <p>I want to <strong>accordion-content</strong> class if include <strong>link-active</strong> or not. So I created the code like that.</p>
  <pre class="lang-js prettyprint-override"><code>import {React, useRef, useEffect, useState } from 'react';
  
  export function App(props) {
    const accordionOperation = useRef(null);
    const [isOperationActive, setOperationActive] = useState(false);
    const [isOperationOpen, setOperationOpen] = useState(false);
  
    useEffect(() =&gt; {
      const accordionOperationChildren = accordionOperation.current?.children;
      for (let i = 0; i &lt; accordionOperationChildren?.length; i++) {
        if (accordionOperationChildren[i].classList.contains(&quot;link-active&quot;)) {
          setOperationActive(true);
        } else {
          setOperationActive(false);
        }
      }
    }, []);
  
    return (
      &lt;div className='App'&gt;
        &lt;ul className=&quot;accordion-content&quot; ref={accordionOperation}&gt;
          &lt;NavLink
            to=&quot;/hc20/bee&quot;
            className={({ isActive }) =&gt; (
              isActive ? &quot;link-active&quot; : &quot;disable&quot;
            )}
          &gt;
            &lt;li className=&quot;aside_list-item&quot;&gt;Bees&lt;/li&gt;
          &lt;/NavLink&gt;
          &lt;NavLink
            to=&quot;/hc20/command&quot;
            className={({ isActive }) =&gt; (
              isActive ? &quot;link-active&quot; : &quot;disable&quot;
            )}
          &gt;
            &lt;li className=&quot;aside_list-item&quot;&gt;Commands&lt;/li&gt;
          &lt;/NavLink&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>But my state called <code>isOperationActive</code> doesn't change according to <strong>active-link</strong>
  I am using <code>Navlink</code> components from <code>react-dom</code>. So when I click on any link the link become active.</p>
  <p><a href="https://i.stack.imgur.com/T9nuZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T9nuZ.png" alt="enter image description here" /></a></p>
  <p>So how can I keep my <code>isOperationActive</code> state updated?</p>
  <p><strong>This is rest of my code</strong></p>
  <pre class="lang-js prettyprint-override"><code>&lt;div className=&quot;accordion operations&quot;&gt;
    &lt;div className=&quot;accordion-item&quot;&gt;
      &lt;div
        className=&quot;accordion-title&quot;
        role=&quot;button&quot;
        tabIndex={0}
        onClick={() =&gt; setOperationOpen(!isOperationOpen)}
      &gt;
        &lt;div
          className={isOperationOpen
          ? &quot;accordion-title-head &quot;
          : &quot;accordion-title-head&quot;}
        &gt;
          &lt;ArrowsHorizontal style={{ paddding: &quot;4px&quot; }} /&gt;
          &lt;div className={&quot;dropdownOperation&quot;}&gt;Operations&lt;/div&gt;
          &lt;div className=&quot;text-white&quot;&gt;
            {isOperationOpen ? &lt;ChevronUp /&gt; : &lt;ChevronDown /&gt;}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      {isOperationOpen &amp;&amp; (
        &lt;ul className=&quot;accordion-content&quot; ref={accordionOperation}&gt;
          &lt;NavLink
            to=&quot;/hc20/bee&quot;
            className={({ isActive }) =&gt; (isActive ? &quot;link-active&quot; : &quot;disable&quot;)}
          &gt;
            &lt;li className=&quot;aside_list-item&quot;&gt;Bees&lt;/li&gt;
          &lt;/NavLink&gt;
          &lt;NavLink
            to=&quot;/hc20/command&quot;
            className={({ isActive }) =&gt; (isActive ? &quot;link-active&quot; : &quot;disable&quot;)}
          &gt;
            &lt;li className=&quot;aside_list-item&quot;&gt;Commands&lt;/li&gt;
          &lt;/NavLink&gt;
          &lt;NavLink
            to=&quot;/hc20/company&quot;
            className={({ isActive }) =&gt; (isActive ? &quot;link-active&quot; : &quot;disable&quot;)}
          &gt;
            &lt;li className=&quot;aside_list-item&quot;&gt;Companies&lt;/li&gt;
          &lt;/NavLink&gt;
          &lt;NavLink
            to=&quot;/hc20/dashboard&quot;
            className={({ isActive }) =&gt; (isActive ? &quot;link-active&quot; : &quot;disable&quot;)}
          &gt;
            &lt;li className=&quot;aside_list-item&quot;&gt;Dashboards&lt;/li&gt;
          &lt;/NavLink&gt;{&quot; &quot;}
          &lt;NavLink
            to=&quot;/hc20/device-profile&quot;
            className={({ isActive }) =&gt; (isActive ? &quot;link-active&quot; : &quot;disable&quot;)}
          &gt;
            &lt;li className=&quot;aside_list-item&quot;&gt;Device Profiles&lt;/li&gt;
          &lt;/NavLink&gt;
          &lt;NavLink
            to=&quot;/hc20/location&quot;
            className={({ isActive }) =&gt; (isActive ? &quot;link-active&quot; : &quot;disable&quot;)}
          &gt;
            &lt;li className=&quot;aside_list-item&quot;&gt;Location&lt;/li&gt;
          &lt;/NavLink&gt;{&quot; &quot;}
          &lt;NavLink
            to=&quot;/hc20/route&quot;
            className={({ isActive }) =&gt; (isActive ? &quot;link-active&quot; : &quot;disable&quot;)}
          &gt;
            &lt;li className=&quot;aside_list-item&quot;&gt;Routes&lt;/li&gt;
          &lt;/NavLink&gt;{&quot; &quot;}
          &lt;NavLink
            to=&quot;/hc20/sub&quot;
            className={({ isActive }) =&gt; (isActive ? &quot;link-active&quot; : &quot;disable&quot;)}
          &gt;
            &lt;li className=&quot;aside_list-item&quot;&gt;Subscriptions&lt;/li&gt;
          &lt;/NavLink&gt;
          &lt;NavLink
            to=&quot;/hc20/trackable&quot;
            className={({ isActive }) =&gt; (isActive ? &quot;link-active&quot; : &quot;disable&quot;)}
          &gt;
            &lt;li className=&quot;aside_list-item&quot;&gt;Trackables&lt;/li&gt;
          &lt;/NavLink&gt;{&quot; &quot;}
          &lt;NavLink
            to=&quot;/hc20/user&quot;
            className={({ isActive }) =&gt; (isActive ? &quot;link-active&quot; : &quot;disable&quot;)}
          &gt;
            &lt;li className=&quot;aside_list-item&quot;&gt;Users&lt;/li&gt;
          &lt;/NavLink&gt;
        &lt;/ul&gt;
      )}
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>