title: Writing a function inside a functional component in react
body: <p>In my application, I have written a function under a functional component and it doesn't work. It says, function is not defined no-undef. But I have written same kind of code in my previous project. What am I doing wrong here? If I convert this to a class component, this works fine. Is it possible to write a code like this? Or do I have to change it to a class component?</p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  
  import PropTypes from 'prop-types';
  import {bindActionCreators} from 'redux';
  import { connect } from 'react-redux';
  import { logoutUser, clearCurrentProfile } from '../../actions'; 
  
  const Navbar = props =&gt; {
  
     const { isAuthenticated, user } = props.auth;
  
     onLogoutClick = e =&gt; {
        e.preventDefault();
  
        props.clearCurrentProfile();
        props.logoutUser();
     }
  
     const authLinks = (
        &lt;ul className="navbar-nav ml-auto"&gt;
           &lt;li className="nav-item"&gt;
              &lt;Link className="nav-link" to="/feed"&gt;
                 Post Feed
              &lt;/Link&gt;
           &lt;/li&gt;
  
           &lt;li className="nav-item"&gt;
              &lt;Link className="nav-link" to="/dashboard"&gt;
                 Dashboard
              &lt;/Link&gt;
           &lt;/li&gt;
  
           &lt;li className="nav-item"&gt;
              &lt;img 
                 className="rounded-circle"
                 style={{ width: '25px' }} 
                 src={user.avatar} 
                 alt={user.name} 
              /&gt;
              &lt;button 
                 type="button"
                 className="link-button nav-link" 
                 onClick={() =&gt; this.onLogoutClick().bind(this)}&gt;  
                    Logout
              &lt;/button&gt;      
           &lt;/li&gt;
        &lt;/ul&gt;
     );
  
     const guestLinks = (
        &lt;ul className="navbar-nav ml-auto"&gt;
           &lt;li className="nav-item"&gt;
              &lt;Link className="nav-link" to="/register"&gt;
                 Sign Up
              &lt;/Link&gt;
           &lt;/li&gt;
  
           &lt;li className="nav-item"&gt;
              &lt;Link className="nav-link" to="/login"&gt;
                 Login
              &lt;/Link&gt;
           &lt;/li&gt;
        &lt;/ul&gt;
     );
  
     return (
        &lt;nav className="navbar navbar-expand-sm navbar-dark bg-dark mb-4"&gt;
           &lt;div className="container"&gt;
              &lt;Link className="navbar-brand" to="/"&gt;
                 DevConnector 
              &lt;/Link&gt;
  
              &lt;button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#mobile-nav"&gt;
                 &lt;span className="navbar-toggler-icon"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
              &lt;div className="collapse navbar-collapse" id="mobile-nav"&gt;
                 &lt;ul className="navbar-nav mr-auto"&gt;
                    &lt;li className="nav-item"&gt;
                       &lt;Link className="nav-link" to="/profiles"&gt; 
                          Developers
                       &lt;/Link&gt;
                    &lt;/li&gt;
                 &lt;/ul&gt;
  
                 {isAuthenticated ? authLinks : guestLinks}
              &lt;/div&gt; 
           &lt;/div&gt;
        &lt;/nav&gt;
     );
  };
  
  Navbar.propTypes = {
     logoutUser: PropTypes.func.isRequired,
     auth: PropTypes.object.isRequired
  }
  
  const mapStateToProps = state =&gt; ({
     auth: state.auth
  });
  
  const mapDispatchToProps = dispatch =&gt; ({
     logoutUser: bindActionCreators(logoutUser, dispatch),
     clearCurrentProfile: bindActionCreators(clearCurrentProfile, dispatch)
  });
  
  export default connect(mapStateToProps, mapDispatchToProps)(Navbar);
  </code></pre>