Reactjs: Unable to access props value in stateless component

Question

I want to access the props.auth value from my stateless component. But on trying to access it getting error of

Error: Objects are not valid as a React child (found: Error: [object Object]). If you meant to render a collection of children, use an array instead.

Any suggestion here for this. Thank you.

//props value

//Stateless component

const LandingPage = (props) => {

    Navbar.propTypes = {
      auth: PropTypes.object.isRequired,
      loading: PropTypes.object.isRequired
    }


    const { isAuthenticated, user } = props.auth;
    
    return (
      <div className="container-big-content">

        { user ? (user.is_admin === true && isAuthenticated ? 
            ( <MenuLogin/> ) : ( <Route component={Error}/>) ):  <Route component={Error}/> }
      </div>
    );
  }
  
  const mapStateToProps = state => ({
    auth: state.auth,
    loading: state.apiCallsInProgress > 0
  });
export default connect(mapStateToProps, null)(LandingPage);

Answer 1

As @RobinZigmond suggested, it does not immediately look like the error is coming from this component.

We can clean up this component a little to help debugging.

import MenuLogin from './path/to/MenuLogin'
import Error from './path/to/Error'
import Route from 'react-router'
const LandingPage = (props) => {
  const { isAuthenticated, user } = props.auth;
    
  const isUserAdmin = user && user.is_admin && isAuthenticated

  return (
    <div className="container-big-content">
      {isUserAdmin ? <MenuLogin /> : <Route component={Error} />}
    </div>
   );
}
  
const mapStateToProps = state => ({
  auth: state.auth,
  loading: state.apiCallsInProgress > 0 
});

LandingPage.propTypes = { 
 auth: PropTypes.object.isRequired,
 loading: PropTypes.object.isRequired
}

export default connect(mapStateToProps)(LandingPage);