React Nav items with conditional render not rendering correctly

Question

I'm currently working on an Web App for educational purposes with React as Frontend and a Rails API as the Backend. I'm trying to render different Nav Links depending on certain info I get from the API. For example, if the student doesn't have a language added, it should only render the profile and payment Nav Links. The problem, is that although it actually enters the given condition (tested with the console.log returning 'undefined' as expected), it doesn't show the return from the if statement, and shows the default one instead. What am I doing wrong here? Is there a more efficient or correct way to achieve this? Any help would be highly appreciated. See code below for more details.

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';

class Nav extends Component {
  constructor(props){
    super(props);
    this.state = {ableToRedirect: false};
  }

  handleClick(){
    this.props.signOut();
    this.setState({ableToRedirect: true});
  }

  render(){
    const member = this.props.member.data;
    const language = this.props.languages;

    if(this.state.ableToRedirect === true){
      window.location.reload();
    }

    if(!member){
      return(
        <h3>Loading...</h3>
      )
    }

    // This is the condition I need to be rendered
    if(!language || language.length === 0 || language === undefined){
      console.log(language)
      return(
       <nav className="cd-side-nav">
          <ul className="side-nav">
            <NavItem to="/mi-perfil"><FontAwesome name="user" />Mi Perfil</NavItem>
            <NavItem to="/mis-pagos"><FontAwesome name="money" />Mis Pagos</NavItem>
            <li><Link to="/about"><FontAwesome name="sign-out" />Cerrar sesión</Link></li>
          </ul>
        </nav>
      )
    }

    // This is what is being rendered instead
    return(
      <nav className="cd-side-nav">
        <ul className="side-nav">
          <NavItem to="/dashboard"><FontAwesome name="tachometer" />Dashboard</NavItem>
          <NavItem to="/mis-cursos"><FontAwesome name="graduation-cap" />Mis cursos</NavItem>
          <NavItem to="/elegir-curso"><FontAwesome name="users" />Elegir grupos</NavItem>
          <NavItem to="/recuperar-sesion"><FontAwesome name="check-circle" />Recuperar sesión</NavItem>
          <NavItem to="/mi-perfil"><FontAwesome name="user" />Mi Perfil</NavItem>
          <NavItem to="/mis-pagos"><FontAwesome name="money" />Mis Pagos</NavItem>
          <li><Link to="/about"><FontAwesome name="sign-out" />Cerrar sesión</Link></li>
        </ul>
      </nav>
    )
  }
}

function NavItem({children, to, exact}){
  return (
    <Route path={to} exact={exact} children={({match}) => (
      <li className={match ? 'active' : ''}>
        <Link to={to}>{children}</Link>
      </li>
    )}/>
  )
}

export default Nav

Answer 1

your code should work. tho you mentioned undefined wrapped in a single quote. undefined is not a string. so double check the language value.

you could use Boolean for that matter.

const condition = Boolean(!language || !language.length || language === undefined)
if(condition) {
   console.log(condition);
   return ....
}