Conditionals in JSX
Instead of
const sampleComponent = () => {
return isTrue ? <p>True!</p> : null
};
Use short-circuit evaluation
const sampleComponent = () => {
return isTrue && <p>True!</p>
};
For Complex scenarios with too many ternaries:
// Y soo many ternary??? :-/
const sampleComponent = () => {
return (
<div>
{flag && flag2 && !flag3
? flag4
? <p>Blah</p>
: flag5
? <p>Meh</p>
: <p>Herp</p>
: <p>Derp</p>
}
</div>
)
};
- Best approach: Move logic to sub-components
- Alternate hacky approach: Use IIFE
There are some libraries that solve this problem (JSX-Control Statements), but rather than introduce another dependency use an IIFE and return values by using if-else statement inside
const sampleComponent = () => {
return (
<div>
{
(() => {
if (flag && flag2 && !flag3) {
if (flag4) {
return <p>Blah</p>
} else if (flag5) {
return <p>Meh</p>
} else {
return <p>Herp</p>
}
} else {
return <p>Derp</p>
}
})()
}
</div>
)
};
With an appropiate transpiler you can take advantage of the upcoming do expression which is currently on stage-1
const sampleComponent = () => {
return (
<div>
{
do => {
if (flag && flag2 && !flag3) {
if (flag4) {
<p>Blah</p>
} else if (flag5) {
<p>Meh</p>
} else {
<p>Herp</p>
}
} else {
<p>Derp</p>
}
}
}
</div>
)
};
Or alternatively simply use early returns
const sampleComponent = () => {
const basicCondition = flag && flag2 && !flag3;
if (!basicCondition) return <p>Derp</p>;
if (flag4) return <p>Blah</p>;
if (flag5) return <p>Meh</p>;
return <p>Herp</p>
}