Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 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 href="#hiw" className="Hiw" to={"/about"}>HOW IT WORKS</a></li>
          <li><a href="#pricing" className="Price" to={"/pricing"}>PRICING</a></li>
          <li><Link className="Faq" to={"/Faq"}>FAQ</Link></li>
          <li><a href="#contact" className="Contact" to={"/contact"}>CONTACT</a></li>
          {ifloggedin}
        </div>
like image 361
Alexander Bishop Avatar asked Dec 18 '22 16:12

Alexander Bishop


1 Answers

ifloggedin is a function so you need to call it.

 <div className="content">
          <li><a href="#hiw" className="Hiw" to={"/about"}>HOW IT WORKS</a></li>
          <li><a href="#pricing" className="Price" to={"/pricing"}>PRICING</a></li>
          <li><Link className="Faq" to={"/Faq"}>FAQ</Link></li>
          <li><a href="#contact" className="Contact" to={"/contact"}>CONTACT</a></li>
          {ifloggedin()}
</div>
like image 175
Tien Duong Avatar answered Dec 31 '22 03:12

Tien Duong