Cannot set property 'props' of undefined

Question

I'm having an issue with the code

TypeError: Cannot set property 'props' of undefined

i think i did everything right. I even referenced

react cannot set property of props of undefined

and

React-router: TypeError: Cannot set property 'props' of undefined

was unable to figure out the error.

import React from 'react';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import signUp from './signUp';
import signIn from './signIn';
import Users from './Users';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import Button from '@material-ui/core/Button';
import {withStyles} from '@material-ui/core';
import Dashboard from './dashBoard';
import { connect } from 'react-redux';
import { createBrowserHistory } from 'history';
import PropTypes, { func, bool, string} from 'prop-types';

export const history = createBrowserHistory({forceRefresh: true});

const styles = {
    // This group of buttons will be aligned to the right

    rightToolbar: {
        color: '#fff',
        textDecoration: 'none',
        a: {
            color: '#fff'

        }
    },
    rightt: {
        marginLeft: 'auto',
        marginRight: 24
    },
    root: {
        flexGrow: 1
    },
    menuButton: {
        marginRight: 16,
        marginLeft: -12
    }
};



const logout = (e) => {
    e.preventDefault();
    localStorage.removeItem('JWT');

};


const Navbar = ({classes, props}) => (


    <Router history={history}>
        <div className={classes.root}>

            <AppBar position="static" className={classes.navbar}>
                <Toolbar>
                    <IconButton color="inherit" aria-label="Menu">
                        <MenuIcon/>
                    </IconButton>
                    <Typography variant="h6" color="inherit">
                        Eli App
                    </Typography>
                    <Typography classcolor="inherit" className={classes.rightt}>

                    {!props.token && ( 

                            <Button>
                            <Link to="/signUp" className={classes.rightToolbar} >
                                Sign Up
                            </Link>
                            </Button>



                    )}



                        <Button>
                            <Link to="/users" className={classes.rightToolbar}>
                              Users
                            </Link>
                        </Button>
                        <Button>
                            <Link to="/dashboard" className={classes.rightToolbar}>
                              Dashboard
                            </Link>
                        </Button>
                        <Button
                            onClick={logout}
                         >
                            <Link className={classes.rightToolbar} to={'/'}>
                                LogOut
                            </Link>
                        </Button>


                    </Typography>

                </Toolbar>
            </AppBar>

            <Route path="/signUp" component={signUp}/>
            <Route path="/signIn" component={signIn}/>
            <Route path="/users" component={Users}/>
            <Route path="/dashboard" component={Dashboard}/>
            <Route path="/signOut"/>
        </div>
    </Router>

);


const mapStateToProps = (state) => ({
    token: state.user.getToken
})

const mapDispatchToProps = (dispatch) => ({
    //   logIn: (user) => dispatch(logIn(user))

});

Navbar.propTypes = {
    token:PropTypes.string,

}

// export default withStyles(styles)(Navbar);
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles))(Navbar);

updated

Answer 1

Th values you are deconstructing in your function's arguments are already your props, if you want to access your token, you can do the following :

const Navbar = ({classes, token}) => ( //classes and token are INSIDE your props

In the render function :

{!token && ( 

It seems like the problem could also come from your export :

export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles))(Navbar);

You should use compose to use multiple HOC together :

import { compose } from 'redux'

//....

export default compose(connect(mapStateToProps, mapDispatchToProps), withStyles(styles))(Navbar);

You may also experience some unexpected behavior when using a stateless function with redux, I suggest also using the solution from @Shalini Sentiya.

Answer 2

    Try to using the navbar react class instead of the function

    class Navbar extends Component {
      constructor(props){
        super(props);
      }
      render() {
        const { token } = this.props;
        return (
          <Router history={history}>
            // your code
            {!token && ( 
             <Button>
               <Link to="/signUp" className={classes.rightToolbar} >
                 Sign Up
               </Link>
             </Button>
           )} 
           // your code
         </Router>
        );
      }
    }
    const mapStateToProps = (state) => ({
        token: state.user.getToken
    })

    const mapDispatchToProps = (dispatch) => ({
        //   logIn: (user) => dispatch(logIn(user))

    });

    Navbar.propTypes = {
        token:PropTypes.string,

    }

    // export default withStyles(styles)(Navbar);
    export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles))(Navbar);