conditional check not working as expected in react component

Question

I am designing the header to display login and logout button based on auth status and I am using react-cookie to store the auth status

Component Code

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { withCookies } from "react-cookie";

class HeaderComponent extends Component {
  renderAuthMenu = () => {
    const { cookies } = this.props;
    console.log(cookies.get("loggedIn"));
    if (cookies.get("loggedIn")) {
      return (
        <ul className="navbar-nav ml-auto" style={{ margin: "0 2em" }}>
          <li className="nav-item">
            <Link to="/logout">Logout</Link>
          </li>
        </ul>
      );
    } else {
      return (
        <ul className="navbar-nav ml-auto" style={{ margin: "0 2em" }}>
          <li className="nav-item">
            <Link to="/login">Login</Link>
          </li>
          <li className="nav-item" style={{ margin: "0 2em" }}>
            <Link to="/register">Signup</Link>
          </li>
        </ul>
      );
    }
  };

  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <Link className="navbar-brand" to="/">
            V1-WorldWide
          </Link>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon" />
          </button>

          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">
              <li className="nav-item" style={{ margin: "0 2em" }}>
                <Link to="/">Products</Link>
              </li>
              <li className="nav-item" style={{ margin: "0 2em" }}>
                <Link to="/products/new">Add Product</Link>
              </li>
            </ul>

            {this.renderAuthMenu()}
          </div>
        </nav>
      </div>
    );
  }
}

export default withCookies(HeaderComponent);

Please Note :- that console before the if check shows the correct value but the correct conditional part does not get rendered I am using ApolloClient also and I am not sure if that matters

@MayankShukla true or false depending on the loggedIn status — Dhaval Chheda, Feb 05 '19 at 18:03
@pengcheng95 it enters the correct conditional also but just does not return the jsx within it — Dhaval Chheda, Feb 05 '19 at 18:03
@DhavalChheda it enters the if block but what you see being returned is the else block? are you checking both the if and else block to see if it enters somehow runs twice and enters the else block the second time? — pengcheng95, Feb 05 '19 at 18:18
@pengcheng95 no it does not enter both blocks .. it goes to the correct block — Dhaval Chheda, Feb 05 '19 at 18:37

conditional check not working as expected in react component

0 Answers0