Conditional Rendering in React

if…else

const isLoggedIn = truefunction Account() {
if(loggedIn) {
return <AccountDetails />
} else {
return <Login />
}
const isLoggedIn = truefunction Account() {
if(loggedIn) {
return <AccountDetails />
} else {
return null
}
}

Ternary Operator

const isLoggedIn = truefunction Account() {
return (
{
isLoggedIn ?
<AccountDetails />
:
<null />
}
)
}

&& Operator

const isLoggedIn = truefunction Account() {
return (
<div>
{
isLoggedIn &&
<AccountDetails />
}
</div>
)
}

Elemental Variables

const isLoggedIn = truefunction Account() {      
let element
if(loggedIn) {
element = <AccountDetails />
} else {
element = <Login />
}
return element
}

Switch

Enumeration

Higher Order Components

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store