title: <button> that changes "navigation titles" with "content field" / passing data from child to parent
body: <p>Learning <strong>React</strong> by rebuilding a simple page I made:</p>
  <p><a href="https://supg.info" rel="nofollow noreferrer">supg.info</a></p>
  <p>I got stuck, trying to recreate &quot;main navigation&quot; functionality - chevron <code>&lt;button&gt;</code>, that changes both &quot;navigation titles&quot; with &quot;content field&quot; of <code>&lt;main&gt;</code> - represented in my app by <code>&lt;Dod /&gt;</code> and <code>&lt;Analogia /&gt;</code> components. I managed to write a <em>useNextTitle</em> <code>hook</code>, that &quot;on click&quot; of the button changes titles, but with that, &quot;content fields&quot; would have to change also - not sure how to do this.</p>
  <p>The way I'm thinking, data from that <code>hook</code> that is being returned to <code>&lt;Nav /&gt;</code> would be useful if I could pass it to parent <code>App.js</code> , so I could write a function that alters <code>display</code> of &quot;component wrapping&quot; <code>&lt;section&gt;</code>s (by changing their <code>.class</code>),  or somehow set up a <code>Router</code>. Was reading about <code>useContext</code> hook also.</p>
  <p>App.js</p>
  <pre><code>import Nav from &quot;./components/Nav&quot;;
  
  function App() {
  
    return (
  
      &lt;div className=&quot;App&quot;&gt;
  
        &lt;Nav /&gt;
        
        &lt;main&gt;
          &lt;section  className=&quot;menu-title__cont&quot;&gt;
            &lt;Dod/&gt;
          &lt;/section&gt;
          &lt;section className=&quot;menu-title__cont&quot;&gt;
            &lt;Analogia/&gt;
          &lt;/section&gt;
        &lt;/main&gt;
  
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Nav.js</p>
  <pre><code>import useNextTitle from './useNextTitle';
  
  const Nav = () =&gt; {
  
      const { navData, val, nextTitle} = useNextTitle();
  
      return (
          &lt;nav&gt;
  
              {/* titles */}
              &lt;ul className=&quot;nav-up--main&quot;&gt;
                  &lt;li key=&quot;li1&quot; className=&quot;um&quot;&gt;
                      {navData.map((title, index) =&gt; {
                          return (
                              &lt;div 
                                  className={index === val ? &quot;active&quot; : &quot;display-none&quot;} key={title.id}&gt;
                                  {title.text}
                              &lt;/div&gt;
                          )
                      })}
                  &lt;/li&gt;
              &lt;/ul&gt;
  
              {/* chevron */}
                  &lt;button onClick={nextTitle}&gt;
                      &lt;span className=&quot;material-icons&quot;&gt;
                          chevron_right
                      &lt;/span&gt;
                  &lt;/button&gt;       
          &lt;/nav&gt;
    )
  }
  export default Nav
  </code></pre>
  <p>useNextTitle</p>
  <pre><code>import { useState } from 'react';
  
  const useNextTitle = () =&gt; {
  
      const navData = [
          {id: 0, text: &quot;DOD Wear&quot;},
          {id: 1, text: &quot;analogia&quot;}
      ]
  
      const [val, setVal] = useState(0);
  
      const nextTitle = () =&gt; {
          setVal(val === navData.length -1 ? 0 : val + 1 )
          console.log(val)
  
      }
      return { navData, val, nextTitle }
  }
  
  export default useNextTitle;
  </code></pre>