There's no built-in looping and conditional syntax in React. This library adds the syntactic sugar to write looping and conditionals as component.
Fork of react control statements but with <React.Fragment/>
implementation
Free Advise
If you are coming from non-jsx background you might think this package is a good start but in reality 🤫 this package is not needed at all.
because, it's easy to replicate this scenarios with pure ES6+, I'm putting some examples that might help you for getting started.
Pure React Conditional Statements
import React from "react"; { const foo = true; const fruits = "🍇 Grapes" "🍈 Melon" "🍌 Banana"; return <> <h1>Simple If without Else</h1> foo && <p>Yay Foo is true</p> <h1>Simple If with Else</h1> foo ? <p>Yay Foo is true</p> : <p>Whoa Foo is false</p> <h1>Loop Example</h1> fruits </> ;}
Install
npm install --save control-statements
Usage
If
The body of the if statement only gets evaluated if condition is true.
import React Component from "react";import If from "control-statements"; { <If => <span>Truth</span> </If>; }
Choose
This is an alternative syntax for more complex conditional statements.
import React Component from "react";import Choose When Otherwise from "control-statements"; { return <div> <Choose> <When => <span>IfBlock</span> </When> <When => <span>ElseIfBlock</span> <span>Another ElseIfBlock</span> <span>...</span> </When> <Otherwise> <span>ElseBlock</span> </Otherwise> </Choose> </div> ; }
For
For syntax.
import React Component from "react";import For from "control-statements"; { return <div> <For ="$item" => <span ="$item.id">$itemtitle</span> </For> </div> ; }