hyperapp: TypeError when using &&
I wanted to remove a node depending on the value of model.isVisible.
TypeError: undefined is not an object (evaluating 'node.data')
Broken Code
export default ({isVisible}) =>
{isVisible && <div>Example!</div>}
Workaround
export default ({isVisible}) =>
{isVisible ? <div>Example!</div> : <div></div>}
Problem
In React the broken version should just work, I think it’s a cleaner solution (and actually it doesn’t create a DOM Node). I’m assuming this is a bug?
About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 16 (10 by maintainers)
@dodekeract Correct, null is not handled! I’ll add it soon 👍.
@jbucaran Of course, the ternary operator is useful too. I use both all the time, depending on what exactly I want to achieve.
I still think the use-case for displaying a boolean is far more limited though. Especially since it isn’t even language-aware. It’ll display it in English all the time, which makes it useless for 75+% of the world. In addition to that I think returning
falseis probably the most explicit thing you can do to communicate “please don’t render this”.I find the approach:
simpler to implement, maintain and also more readable than using && or ||.
If you have a single vnode tree that you want on/off, && or || might seem convenient, but what if you actually want to show something?
In that case you’ll use the ternary operator. I’d rather use the ternary operator all the time then.
I had this issue myself when I first started React. I found the
bool && Componentpattern often, but as my expressions became more and more complex I found the mess of && and || harder to debug than the good old friend ? @:.IMO the ternary operator is very clear (other than the fact that’s using arbitrary ? and : characters, but we’re all used to that anyway).