Conditional rendering not displaying - ReactJS

Question

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>

Tien Duong · Accepted Answer · 2019-07-22 07:36:27Z

9

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>

answered Jul 22, 2019 at 7:36

Tien Duong

2,6051 gold badge12 silver badges30 bronze badges

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

Comments

niks · Accepted Answer · 2019-07-22 08:17:09Z

2

You have to call ifloggedin as ifloggedin(), because it is an arrow function. But in your case you are using it for conditional rendering so no need to write arrow function for that.

You can write it as normal function and use as ifloggedin()

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

answered Jul 22, 2019 at 8:17

niks

4764 silver badges9 bronze badges

Collectives™ on Stack Overflow

Conditional rendering not displaying - ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related