conditional component react code example
Example 1: react style ternary operator
<img
src={this.state.photo}
alt=""
style={ isLoggedIn ? { display:'block'} : {display : 'none'} }
/>
// or
<img
src={this.state.photo}
alt=""
style={ { display: isLoggedIn ? 'block' : 'none' } }
/>
Example 2: react conditional class
<div className={"btn-group pull-right " + (this.props.showBulkActions ? 'show' : 'hidden')}>
Example 3: 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 4: ternary react
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
</div>
);
}
Example 5: conditional props react
// single prop
propName={ condition ? something : somethingElse }
propName={ condition && something }
// multiple props
{ ...( condition ? { ...setOfProps } : { ...setOfOtherProps })}
{ ...( condition && { ...setOfProps })}
Example 6: 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>
);
}