prop returns Null when component renders - reactjs

Question

I am trying to add some functionality that enables or disables a button depending on whether the user has at least one "credit". I want to use the logical && to determine whether to enabled or disabled the button. The parent component fetches the current user asynchronously, which should give the component access to the user model and the users credits.
CHILD COMPONENT:
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import SurveyList from './surveys/SurveyList';
class Dashboard extends Component {
render() {
console.log(this.props);
return (
<div>
<SurveyList />
<div className="fixed-action-btn">
{this.props.auth.credits &&
<Link to="/surveys/new" className="btn-floating btn-large red">
<i className="material-icons">add</i>
</Link>
}
<button className="btn-floating btn-large disabled red">
<i className="material-icons">add</i>
</button>
</div>
</div>
);
}
};
function mapStateToProps(state) {
return {
auth: state.auth
}
}
export default connect(mapStateToProps)(Dashboard);
PARENT COMPONENT:
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Header from './Header';
import { connect } from 'react-redux';
import * as actions from '../actions';
import Landing from './Landing';
import Dashboard from './Dashboard';
import NewList from './lists/NewList';
class App extends Component {
componentDidMount() {
this.props.fetchUser();
}
render() {
console.log(this.props);
return (
<div className="container">
<BrowserRouter>
<div>
<Header />
<Route exact path='/' component={Landing} />
<Route exact path='/surveys' component={Dashboard} />
<Route path='/surveys/new' component={NewList} />
</div>
</BrowserRouter>
</div>
);
}
};
export default connect(null, actions)(App);
ACTION:
export const fetchUser = () => async dispatch => {
const res = await axios.get('/api/currentUser')
dispatch({ type: FETCH_USER, payload: res.data});
};

Answer 1

Add an additional check this.props.auth && this.props.auth.credits &&...