if react jsx code example
Example 1: jsx if block
render () {
return (
<div>
{(() => {
if (someCase) {
return (
<div>someCase</div>
)
} else if (otherCase) {
return (
<div>otherCase</div>
)
} else {
return (
<div>catch all</div>
)
}
})()}
</div>
)
}
Example 2: react native conditional rendering
class Component extends React.Component {
const a = true
render() {
return (
<Container>
{a == true
? (<Button/>)
: null
}
</Container>
)
}
}
This is staying: if a == true, render a button component.
Otherwise render null, in other words nothing.
Example 3: ternary react
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
Example 4: make a if in jsx
var loginButton;
if (loggedIn) {
loginButton = <LogoutButton />;
} else {
loginButton = <LoginButton />;
}
return (
<nav>
<Home />
{loginButton}
</nav>
);
Example 5: react if statement
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in. </div>
);
}