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

Sam Ewdala · Accepted Answer · 2019-03-03 17:08:14Z

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 ....
}

answered Mar 3, 2019 at 17:08

Sam Ewdala

5133 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

VioletaLibertad Over a year ago

I changed the condition language.length === 0 to your suggestion !language.length and it worked! Thank you so much!

Collectives™ on Stack Overflow

React Nav items with conditional render not rendering correctly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related