I personally think ternaries are fine, but expanding on your solution:
By adding a third else = null prop (and return else instead of return null), you can default to null while allowing for an actual value on the other side of the ternary e.g.
function IF({children, condition, else = null}) {
if (condition) {
// render children if the condition is truthy
return children;
}
return else;
}
/**
* Use the component as follows:
*
* <IF condition={condition}>
* <Greeter username={user.name} />
* </IF>
*
* With 'else' prop, equivalent to
* {condition ? <Greeter username={user.name} /> : <LoginButton />}
*
* const renderElse = () => <LoginButton />
* <IF condition={condition} else={renderElse}>
* <Greeter username={user.name} />
* </IF>
*
*
*/
You could even take it further with another prop, an array of objects in the shape of {extraCondition, extraReturn}, for else 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).
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I personally think ternaries are fine, but expanding on your solution:
By adding a third
else = nullprop (andreturn elseinstead 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 ifscenarios (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).