To write conditional statements in JSX you can make use of short-circuit evaluation for simpler conditions and for complex conditions, you can make use of early returns.
So instead of writing your JSX like below:
Short Circuit Evaluation
So instead of writing your JSX like below:
function SampleComponent({ isTrue }) {
return isTrue ? <p>True!</p> : null;
};You can make use of short circuit evaluation like the following:
function SampleComponent({ isTrue }) {
return isTrue && <p>True!</p>;
};The important part for it is the && (AND) operator which will determine how the value should be returned.
If you are dealing with complex conditions, it's recommended to use simple early returns where each condition automatically returns the necessary value.
Simple Early Returns
If you are dealing with complex conditions, it's recommended to use simple early returns where each condition automatically returns the necessary value.
function SampleComponent({ a, b, c, d, e }) {
const condition = a && b && !c;
if (!condition) return <p>Foo</p>;
if (d) return <p>Bar</p>;
if (e) return <p>Baz</p>;
return <p>Qux</p>
}
Leave a reply