Ad

Conditional Rendering Not Displaying - ReactJS

I have a log out button that I only want to show when the user is logged in.

I have created a function for this purpose and included the function in the return part of react but it's not working.

This is the function:

const ifloggedin = () => {
    if (!localStorage.hasOwnProperty('token')) {
      return null
} else {
return <li><a target="_blank" rel="nofollow noreferrer" href="#contact" className="Contact" onClick={logout} to={"/"}>Log Out</a></li>
}
  }

This is how I am trying to render it in return:

        <div className="content">
          <li><a target="_blank" rel="nofollow noreferrer" href="#hiw" className="Hiw" to={"/about"}>HOW IT WORKS</a></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#pricing" className="Price" to={"/pricing"}>PRICING</a></li>
          <li><Link className="Faq" to={"/Faq"}>FAQ</Link></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#contact" className="Contact" to={"/contact"}>CONTACT</a></li>
          {ifloggedin}
        </div>
Ad

Answer

ifloggedin is a function so you need to call it.

 <div className="content">
          <li><a target="_blank" rel="nofollow noreferrer" href="#hiw" className="Hiw" to={"/about"}>HOW IT WORKS</a></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#pricing" className="Price" to={"/pricing"}>PRICING</a></li>
          <li><Link className="Faq" to={"/Faq"}>FAQ</Link></li>
          <li><a target="_blank" rel="nofollow noreferrer" href="#contact" className="Contact" to={"/contact"}>CONTACT</a></li>
          {ifloggedin()}
</div>
Ad
source: stackoverflow.com
Ad