title: How to fix "... is not a function" error?
body: <p>I'm passing down a state setter to a child (from App to Nav), but when I'm calling it I'm getting TypeError: ... is not a function.</p>
  
  <p>How should I fix it? What should I do?</p>
  
  <p>App:</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import './App.css';
  
  /* Component imports */
  import Nav from './components/nav/nav';
  import Container from './components/container/container';
  
  /*------------------*/
  
  function App() {
    const [appState, setAppState] = useState("home");
  
      useEffect(() =&gt; {
        console.log(appState);
      }, [appState])
  
    return (  
      &lt;div className="App"&gt;
        &lt;Nav state={setAppState}/&gt;
        &lt;Container stateSetter={appState}/&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  
  <p>Nav:</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import './nav.css';
  
  /* Component imports */
  
  
  
  /*------------------*/
  
  function Nav(props) {
      return (
          &lt;div&gt;
              &lt;div className="Nav" id="nav"&gt;
                  &lt;nav&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;button&gt;&lt;span&gt;App&lt;/span&gt;&lt;/button&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;button onClick={() =&gt; props.stateSetter("home")}&gt;Home&lt;/button&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;button onClick={() =&gt; props.stateSetter("products")}&gt;Products&lt;/button&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;button onClick={() =&gt; props.stateSetter("about_us")}&gt;About Us&lt;/button&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;button onClick={() =&gt; props.stateSetter("log_in")}&gt;Log in&lt;/button&gt;&lt;/li&gt; 
                      &lt;/ul&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default Nav;
  </code></pre>
  
  <p>Container:</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import './conatiner.css';
  
  /* Component imports */
  
  
  
  /*------------------*/
  
  function Container(props) {
  
      const [cont_appState] = useState(props.state);
  
      useEffect(() =&gt; {
  
      }, [cont_appState])
  
      return (
          &lt;div&gt;
              &lt;div className="container"&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default Container;
  </code></pre>
  
  <p>I just started working an this project, I am also new to react, sorry for my messy code.</p>
  
  <p><a href="https://i.stack.imgur.com/V8Ju3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/V8Ju3.png" alt="enter image description here"></a></p>
  
  <p>I have to add text to be able to post is: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam placeat atque ipsa eius facilis! Quidem ad officia architecto molestias! Autem molestias molestiae deserunt tempore maxime delectus commodi cum blanditiis inventore?</p>