if statement jsx 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: ternary operator react
render () {
return (
<div className="row">
{ //Check if message failed
(this.state.message === 'failed')
? <div> Something went wrong </div>
: <div> Everything in the world is fine </div>
}
</div>
);
}
Example 3: 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 4: if else render react
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<LogoutButton onClick={this.handleLogoutClick} />
) : (
<LoginButton onClick={this.handleLoginClick} />
)}
</div>
);
}
Example 5: if else react render in jsc
const functionalComponent=()=> {
return (
<div>{
props.isFeatured ? (
<div className="featured_ovelay_icon">lol</div>
) : ("")
}
</div>
);
}
Example 6: how to use if else inside jsx in react
renderElement(){
if(this.state.value == 'news')
return <Text>data</Text>;
return null;
}
render() {
return (
<View style={styles.container}>
{ this.renderElement() }
</View>
)
}