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
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad