This
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
{isLoggedIn ? (
<span>
<Button onClick={this.handdleSettingsClick}>Account Settings</Button>
<Button onClick={this.handleLogoutClick}>Logout</Button>
</span>
) : (
<span>
<Button onClick={this.handleLoginClick}>Login</Button>
<Button onClick={this.handleSignUpClick}>Sign Up</Button>
</span>
)}
</div>
);
}becomes this ✨
render() {
const isLoggedIn = this.state.isLoggedIn;
return (
<div>
<If condition={isLoggedIn}>
<Button onClick={this.handdleSettingsClick}>Account Settings</Button>
<Button onClick={this.handleLogoutClick}>Logout</Button>
<Else />
<Button onClick={this.handleLoginClick}>Login</Button>
<Button onClick={this.handleSignUpClick}>Sign Up</Button>
</If>
</div>
);
}Install via npm:
$ npm install if-else-react --save
and then just import it in your app
import If, { Else } from 'if-else-react';and use it like shown in the example above. done 🎉
The If Component is only rendering whats inside if the condition prop is true.
If there is a Else component as a direct children then all children components after the Else will be rendered if the condition is false.
| Prop | Type | Default | Required? |
|---|---|---|---|
| condition | boolean |
undefined |
no |
The Else Component renders and does nothing by itself. But when used inside of a Ifthen it seperates what is rendered based on the condition passed into the If.
| Prop | Type | Default | Required? |
|---|---|---|---|
| - | - | - | - |