React Declarative [IF Conditions , Loop] Statements
npm install react-ifloop> React Declarative [IF Conditions , Loop] Statements
 
``bash`
npm install --save react-ifloop
` show data show data
instead of writing imperative code to show ui element if condition met
like this {showData &&
`jsx
import React, { Component } from 'react'
import MyComponent from 'react-ifloop'
import 'react-ifloop/dist/index.css'
import { ElseCondition, ElseIfCondition, IfCondition, IfElseCondition, IfMultiCondition } from "./IfConditions";
import ForLoop from "./ForLoop";
class Example extends Component {
state = { showUser: true, status: "ACTIVE", items: ["Item1", "Item2", "Item3", "Item4"] }
render() {
return
show user
show user
hide user
User is Active
User not Active
user is disabled
{item} is event
{item} is odd
No Items Found
}>- IfElseCondition show first element if condition met otherwise show second element.
- IfMultiCondition start loop in children conditions components and if one of them match render it's child and stop rendering, if none of conditions match it looking for
ElseCondition if found it render it's child otherwise no child will be rendered in screen.
- ForLoop component take items to loop in and call forEachItem function sending item and index of item and render return child from this function,
and you can also merge IfCondition & Other components.
MIT © ahmedthinkdifferent