how to do conditional rendering in arrow function?

user_12737013 0
Viewed 661

I am new to arrow functions i am developing an app for user and i am using react template for that in my app there is login and logout system as well and i put logout button in footer of that template and i am facing a problem that whenever user go to website then before login user see the logout button because that button is in footer so what i want is to disappear logout button on the basis of email that is stored in session i mean if session have user email then logout button appear in footer otherwise user not seen that logout button here is the code of the footer

import React from 'react';
import PropTypes from 'prop-types';
const email = session.getitem('user.email');
const FooterText = (props) => (

    
    
    
    <React.Fragment>

    
<br/><br/>
 <div className="hr-text hr-text-center my-2" > 
// i want to put check here that if session have user email then show that button other vise disappear
<button onClick={logout}>Logout</button> 
 </div> 


        &copy; { props.year } All Rights Reserved. 
        Designed and implemented by{' '}
        <a
            href="http://aliraza"
            target="_blank"
            rel="noopener noreferrer"
            className="sidebar__link"
        >
            ali raza
        </a>
    </React.Fragment>
)
FooterText.propTypes = {
    year: PropTypes.node,
    name: PropTypes.node,
    desc: PropTypes.node,
};
FooterText.defaultProps = {
    year: "2020",
    name: "Admin Theme",
    desc: "Bootstrap 4, React 16 (latest) & NPM"
};

export { FooterText };

i want to put check here that if session have user email then show that button other vise disappear but in arrow function i am struggling to use if else statement how can we do that?

arrow-functions reactjs javascript
2 Answers

You can try with React way:

{condition && <button onClick={logout}>Logout</button>}

If the condition is true, it will show the button otherwise nothing will be displayed.

React Conditinal Rendering

user_27367040

You can apply check like below you can use ternary operator to check condition

 import React from 'react';
import PropTypes from 'prop-types';
const email = session.getitem('user.email');
const FooterText = (props) => (

    
    
    
    <React.Fragment>

    
<br/><br/>
 <div className="hr-text hr-text-center my-2" > 
// i want to put check here that if session have user email then show that button other vise disappear
{email?(<button onClick={logout}>Logout</button>):null} 
 </div> 


        &copy; { props.year } All Rights Reserved. 
        Designed and implemented by{' '}
        <a
            href="http://aliraza"
            target="_blank"
            rel="noopener noreferrer"
            className="sidebar__link"
        >
            ali raza
        </a>
    </React.Fragment>
)
FooterText.propTypes = {
    year: PropTypes.node,
    name: PropTypes.node,
    desc: PropTypes.node,
};
FooterText.defaultProps = {
    year: "2020",
    name: "Admin Theme",
    desc: "Bootstrap 4, React 16 (latest) & NPM"
};

export { FooterText };
user_79671190
Related