Component claiming state prop is undefined eventhough it is, Auth - reactjs

Question

Im trying to log out a user as well as displaying a register/login div or profile section, depending if a user is logged in or not, Im trying to do this on a component that gets render on my main app.
Using ReduxDevTools I can see that the auth state changes when I log in a user or not, but when I try to render the LeftContainer setting auth: state.auth I get auth is undefined,
error:
Cannot read property 'isAuthenticated' of undefined
Warning: Failed prop type: The prop auth is marked as required in LeftContainer, but its value is undefined.
LeftContainerProfile/index.js
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router'
import { connect } from 'react-redux';
import { logout } from '../../containers/SignIn/authActions';
import styled from 'styled-components';
import Logo from '../Logo/Logo';
import SocialLinks from '../SocialLinks/social_links';
import ProfileContainer from './profile';
import LinksContainer from './about_links';
const Wrapper = styled.div`
position: absolute;
top: 250px;
width: 20%;
padding-left: 4%;
padding-right: 4%;
// height: 100vh;
`;
const Button = styled(Link)`
width: 100px;
height: 50px;
background-color: red;
color: white;
margin: 5px;
`;
class LeftContainer extends React.Component { // eslint-disable-line react/prefer-stateless-function
logout(e) {
e.preventDefault();
this.props.logout();
}
render() {
const { isAuthenticated } = this.props.auth;
const userLinks = (
<div>
<ProfileContainer />
<Button onClick={this.logout.bind(this)}> LOGOUT </Button>
</div>
);
const guestLinks = (
<div>
<Button to='/login'>LOGIN</Button>
<Button to='/sign-up'>REGISTER</Button>
</div>
);
return (
<Wrapper>
{ isAuthenticated ? userLinks : guestLinks }
<LinksContainer />
<SocialLinks />
</Wrapper>
);
}
}
LeftContainer.propTypes = {
auth: React.PropTypes.object.isRequired,
logout: React.PropTypes.func.isRequired
}
function mapStateToProps(state) {
return {
auth: state.auth
};
}
export default connect(mapStateToProps, { logout })(LeftContainer);
Im trying to get the state of auth but i get either undefined or object
here is a picture from reduxdevtools
https://gyazo.com/b189a75e1123cb198412adf93bdd3497
edit 3: When I do this
function mapStateToProps(state) {
console.log(state);
return {
isAuthenticated: state.auth
};
}
I get this
https://gyazo.com/432247229816e4a68a50133834b551c9
maybe this will help people in helping find the solution to my problem
edit 4: I found a solution but Im not sure if this was the correct way of going about this, can someone maybe explain why state.auth was not giving my desire result, is it something in my reducer or something else? here is my solution
class LeftContainer extends React.Component { // eslint-disable-line react/prefer-stateless-function
logout(e) {
e.preventDefault();
this.props.logout();
}
render() {
const { isAuthenticated } = this.props;
const userLinks = (
<div>
<ProfileContainer />
<Button onClick={this.logout.bind(this)}> LOGOUT </Button>
</div>
);
const guestLinks = (
<div>
<Button to='/login'>LOGIN</Button>
<Button to='/sign-up'>REGISTER</Button>
</div>
);
return (
<Wrapper>
{ isAuthenticated ? userLinks : guestLinks }
<div>
{/*<Button to='/login'>LOGIN</Button>
<Button to='/sign-up'>REGISTER</Button>*/}
</div>
<LinksContainer />
<SocialLinks />
</Wrapper>
);
}
}
// LeftContainer.propTypes = {
// auth: React.PropTypes.object.isRequired,
// logout: React.PropTypes.func.isRequired
// }
// LeftContainer.propTypes = {
// isAuthenticated: React.PropTypes.bool.isRequired,
// logout: React.PropTypes.func.isRequired
// }
// LeftContainer.defaultProps = {
// isAuthenticated: true,
// }
function mapStateToProps(state) {
console.log(state._root.entries[3][1].isAuthenticated);
return {
isAuthenticated: state._root.entries[3][1].isAuthenticated
};
}
export default connect(mapStateToProps, { logout })(LeftContainer);

Answer 1

or a much simpler approach (than the one I've listed in the comment):
I treated the isAuthenticated directly from the mapeStateToProps function and made it a bool value for more readiblity. This is less error prone because you don't pass a nested object on props. Also as a fallback I've added a defaultProp value.
Hope this does the trick.
class LeftContainer extends React.Component { // eslint-disable-line react/prefer-stateless-function
logout(e) {
e.preventDefault();
this.props.logout();
}
render() {
const { isAuthenticated } = this.props;
const userLinks = (
<div>
<ProfileContainer />
<Button onClick={this.logout.bind(this)}> LOGOUT </Button>
</div>
);
const guestLinks = (
<div>
<Button to='/login'>LOGIN</Button>
<Button to='/sign-up'>REGISTER</Button>
</div>
);
return (
<Wrapper>
{ isAuthenticated ? userLinks : guestLinks }
<LinksContainer />
<SocialLinks />
</Wrapper>
);
}
}
LeftContainer.propTypes = {
isAuthenticated: React.PropTypes.bool.isRequired,
logout: React.PropTypes.func.isRequired
}
LeftContainer.defaultProps = {
isAuthenticated: false,
}
function mapStateToProps(state) {
return {
isAuthenticated: state.auth && state.auth.isAuthenticated
};
}
export default connect(mapStateToProps, { logout })(LeftContainer);