ternary jsx code example
Example 1: ternary operator react
render () {
return (
<div className="row">
{
(this.state.message === 'failed')
? <div> Something went wrong </div>
: <div> Everything in the world is fine </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>
);
}