title: Re-Rendering component, after click event in different component
body: <p>In my <strong>App</strong> I have a <strong>HeaderLogo</strong> component, with <code>&lt;h1&gt;</code> containing animation (inside its <code>head-main</code> class). I would like to re-render this component to trigger animation, after <code>onclick</code> event in <code>&lt;NavLink&gt;</code>.</p>
  <p><code>&lt;NavLink&gt;</code> is inside <strong>DropdownMenu</strong>, which is inside <strong>MainNavi</strong>.</p>
  <p><strong>HeaderLogo</strong></p>
  <pre><code>const HeaderLogo = () =&gt; {
  
    return (
      &lt;header&gt;
          &lt;h1 className=&quot;head-main&quot;&gt;learning curve&lt;/h1&gt;
      &lt;/header&gt;
    )
  }
  export default HeaderLogo
  </code></pre>
  <p><strong>Dropdown Menu</strong></p>
  <pre><code>import { MenuItemContentSchool } from &quot;./sub-components/MenuItemContentSchool&quot;
  import { useState } from &quot;react&quot;;
  import { NavLink } from &quot;react-router-dom&quot;;
  
  
  const DropdownMenu2 = () =&gt; {
  
    const [click, setClick] = useState(&quot;&quot;);
  
    const handleClick = () =&gt; {
      setClick(&quot;hide-menu&quot;);
    }
  
  
    return (
      &lt;div className={`dropdown-holder-us ${click}`}&gt;
      {MenuItemContentSchool.map((item) =&gt; {
        return (
          &lt;NavLink
              to={item.link} 
              className='d-content-us'
              onClick={handleClick}  
              key={item.title} 
          &gt;
            {item.title}
          &lt;/NavLink&gt;
        )
      } )}
  
  &lt;/div&gt;
    )
  }
  export default DropdownMenu2
  </code></pre>
  <p><strong>App</strong></p>
  <pre><code>import { BrowserRouter as Router, Routes, Route } from &quot;react-router-dom&quot;;
  import HeaderLogo from &quot;./components/HeaderLogo&quot;;
  import NaviMain from &quot;./components/NaviMain&quot;;    
  
  function App() {
  
  
    return (
      &lt;Router&gt;
          &lt;div className=&quot;App&quot;&gt;
  
            &lt;HeaderLogo /&gt;
            &lt;NaviMain  /&gt;
  
            &lt;Routes&gt;
                //...
            &lt;/Routes&gt;
            
          &lt;/div&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p><strong>NaviMain</strong></p>
  <pre><code>import DropdownMenu2 from &quot;./DropdownMenu2&quot;;
  
  const NaviMain = () =&gt; {
         
    return (
      &lt;nav&gt;
          &lt;ul className=&quot;nav-main&quot;&gt;  
              &lt;li className=&quot;nav-main__button&quot;&gt;
                  &lt;a&gt;school&lt;/a&gt;
                  &lt;DropdownMenu2 /&gt; 
              &lt;/li&gt;           
          &lt;/ul&gt;    
      &lt;/nav&gt;
    )
  }
  export default NaviMain
  </code></pre>