Something that has started appearing in my code quite a bit is:
<Parent>
{if (condition) {
<Child />;
} else {
<div />;
}}
<Sibling />
</Parent>;
Basically I only want the Child
to render if the condition is true, otherwise render nothing.
It feels wrong putting the div
in the else condition, since this renders a div
that really shouldn't be there. How can I conditionally render a component without having to render an unnecessary element if the condition is false?
You have to use
React.null
instead of the emptydiv
.ReasonML forces you to have the same type in the if and else blocks, and as you return a
React.element
in the if block, you also need to return one in the else block.You can however use ternary, if you want your code to be a bit shorter: