Avoiding PropType warnings due to renders before API data is returned

UserDropDown.js

import React from 'react'
import style from './UserDropDown.scss'

class UserDropDown extends React.Component {
  render() {
    const { logout, user } = this.props

    return (
      <div>
        <span onClick={logout}>{user.username}</span>
      </div>
    )
  }
}


UserDropDown.propTypes = {
  logout: React.PropTypes.func.isRequired,
  user: React.PropTypes.object.isRequired,
}

export default UserDropDown

UserDropDownContainer-new.js

import React from 'react'
import { connect } from 'react-redux'

import UserDropDown from '../../components/UserDropDown/UserDropDown'
import { getUser } from '../../redux/users/users'
import { getThisUserId, logout } from '../../redux/user-auth/user-auth'

const UserDropDownContainer = (props) => {
  return (
    <div>
      {props.user ? <UserDropDown {...props} /> : null }
    </div>
  )
}

UserDropDownContainer.propTypes = {
  user: React.PropTypes.object,
}

const mapStateToProps = (state) => {
  const userId = getThisUserId(state)
  return {
    user: getUser(state, userId),
  }
}

const mapDispatchToProps = (dispatch) => (
  {
    logout: () => dispatch(logout()),
  }
)

export default connect(mapStateToProps, mapDispatchToProps)(UserDropDownContainer)

UserDropDownContainer-old.js

import { connect } from 'react-redux'

import UserDropDown from '../../components/UserDropDown/UserDropDown'
import { getUser } from '../../redux/users/users'
import { getThisUserId, logout } from '../../redux/user-auth/user-auth'


const mapStateToProps = (state) => {
  const userId = getThisUserId(state)
  return {
    user: getUser(state, userId),
  }
}

const mapDispatchToProps = (dispatch) => (
  {
    logout: () => dispatch(logout()),
  }
)

export default connect(mapStateToProps, mapDispatchToProps)(UserDropDown)