render jsx button in if statement code example
Example 1: ternary react
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
Example 2: react native conditional rendering
function Mailbox(props) {
const unreadMessages = props.unreadMessages;
return (
<div>
<h1>Hello!</h1>
{unreadMessages.length > 0 &&
<h2>
You have {unreadMessages.length} unread messages.
</h2>
}
</div>
);
}
Example 3: conditional rendering react
import React, { Component } from 'react';
export class HeroComponent extends Component
{
render() {
return (
<section className={"hero" + (this.props.type ? " " + this.props.type + " " : " ") + this.props.size}>
<div className="hero-body">
<div className={"container" + this.props.alignment ? " " + this.props.alignment : ""}>
<h1 className="title">{this.props.heading}</h1>
{this.props.subheading && <h2 className="subtitle">{this.props.subheading}</h2>}
</div>
</div>
</section>
)
}
}