After using Vue and Angular.js (I used the first version of Angular when it came out) for many years, I have to say that I always enjoyed the simplicity of using v-if
and ng-if
to render child components conditionally.
Now I'm writing React primarily and honestly I'm bothered by the constant use of ternary operators when dealing with conditionally rendered components.
function SomeComponent({condition}) {
return <div>
{ condition ? <span>Yes it is true!</span> : null }
</div>
}
It's not a big deal, and there are many different ways to render boolean-dependent components, but I find myself writing code such as the above repeatedly.
Today I read 7 Ways of Achieving Conditional Rendering in React, and it included a handy snippet that I'll adopt from now on.
A conditional if
component
I can't say that I didn't consider abstracting the ternary operators away, but somehow I never took it into practice. Fernando Doglio's article now moved me over the line to adopt a nicer pattern. Say hi to the functional if
component.
function IF({children, condition}) {
if (condition) {
// render children if the condition is truthy
return children;
}
return null;
}
/**
* Use the component as follows:
*
* <IF condition={condition}>
* <Greeter username={user.name} />
* </IF>
*/
It's seven lines of code and this tiny component can be brought into any React project as handy utility. Much better! Thank you Fernando!
Top comments (6)
I personally think ternaries are fine, but expanding on your solution:
By adding a third
else = null
prop (andreturn else
instead ofreturn null
), you can default to null while allowing for an actual value on the other side of the ternary e.g.You could even take it further with another prop, an array of objects in the shape of
{extraCondition, extraReturn}
, forelse if
scenarios (that's going to take too much typing to give an example of the additional logic on my phone, but I hope you get the gist).May also be pretty nice to use
React.memo
on it, just for performance.This is a really good expression of it.
I've been trying to do something very similar since we have something like
but we have a few ways for newAccount to be true
something like
is a start
I do like this solution. We've used this in the past but reverted this again soon: it led to performance issues.
Unlike the ternary operator
a ? b : c
or&&
, this<IF>...</IF>
component will always create and render its inner contents (children
), and in case the condition is false, the rendered children is only ignored by<IF>
in the end. That can be very expensive.This feels like going back around to html templating languages like handlebars or nunjucks or ejs and I don't hate that