nav bar in react using single responsibility principle

NavBar.js

var MyNav = React.createClass({
  _testForCompleteFields: function(uMod){
    var criticalFields = ['yard', 'dev', 'whatev']
    var fieldsAreComplete = true

    criticalFields.forEach(function(field){
      if ( uMod.get(field) === null ) { fieldsAreComplete = false }
    })

    return fieldsAreComplete
  },

  _unauthNavJSX: function(){
    return (
      <div>
        <Link>Home</Link>
        <Link>Sign In</Link>
        <Link>Register</Link>
      </div>
    )
  },

  _shortNavJSX: function(){
    return (
      <div>
        <Link>Home</Link>
        <Link>Logout</Link>
      </div>
    )
  },

  _longNavJSX: function(){
    return <div>
      <Link>Home</Link>
      <Link>Profile</Link>
      <Link>My Messages</Link>
      <Link>Pets Interested</Link>
      <Link>Logout</Link>
    </div>
  },

  _showNavBtns: function(userModel){
    // if user is NOT authenticated 
    if( !userModel.get('id') ) return _unauthNavJSX()
    
    // test to see if user has completed the fields
    if( this._testForCompleteFields(userModel) === true ) {
      // if fields ARE complete, return longNavJSX 
      return this._longNavJSX()
    } else {
      // else, return shortNavJSX 
      return this._shortNavJSX()
    }

  },

  render: function(){
    return (
      <div className="navdiv"> 
        {this._showNavBtns( this.state.user )}
      </div>
    )
  }
})