simplify conditional rendering.
npm install react-if-else-switchIf, Then, Elsejsx
{
age >= 18 ? inVotingList ? You can vote. :
You can't vote. Your name is not in voting list. : You are too young to vote.
}
`
#### 2. After
`jsx
= 18}>
You can vote.
You can't vote. Your name is not in voting list.
You are too young to vote.
`
---
$3
1. Install via npm or yarn:
`
$ npm install react-if-else-switch
`
`
$ yarn add react-if-else-switch
`
2. Import in your component:
`jsx
import {If, Then, Else} from 'react-if-else-switch';
`
3. Use it like shown in the above example.
---
$3
1. If
* Wrapper component for Then and Else.
* It takes a condition as a prop.
* Anything other outside of Then and Else will be ignored.
* If condition is truthy, then the children of Then will be rendered.
* If condition is falsy, then the children of Else will be rendered.
2. Then
* Must be used inside If.
* Must contain children/child.
3. Else
* Must be used inside If.
* Must contain children/child.
---
#### Extra Notes
* You can use multiple Then or Else in a single If, in case if you need.
* You can nest them as per your need, as shown in the above example.
2.
Switch, Case, Default
$3
`jsx
You are 18.
You are 21.
You are not 18 or 21.
`
$3
1. Install via npm or yarn:
2. Import in your component:
`jsx
import {Switch, Case, Default} from 'react-if-else-switch';
`
3. Use it like shown in the above example.
$3
1. Switch
* Wrapper component for Case and Default.
* It takes an expression as a prop.
* It also takes two optional boolean props fallthrough and enableMemo.
* By default both 'fallthrough' and 'enableMemo' are false.
* After enabling memo feature, it will only re-render if the expression changes.
* After enabling fallthrough you will need to pass a boolean break in the Case component wherever you want to
stop fallthrough.
* Anything else outside of Case and Default will be ignored.
2. Case
* Must be used inside Switch.
* It takes a value as a prop.
* Must contain children/child.
* Optional boolean prop break if fallthrough is enabled in Switch.
3. Default
* Must be used inside Switch.
* Must contain children/child.
$3
`jsx
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
Sunday
week day number must be between 1 and 7
``