Hacker News Reader

Comment by BowBun | Hacker News Reader

I disagree with this point: Using conditionals in your view components.

Putting if statements into your view is not the React way. You should be rendering something like {productList}, and that productList() function should be the one handling any outstanding logic. Even better, Your React should be generic enough to accept data you filter and edit in your controllers.

View on HN

More on that point. The reason you cannot use if/else within JSX is because the statement needs to evaluate to an expression. If you really need to use if/else logic embedded, a ternary operator would work just fine.

return ( <nav> <Home /> { loggedIn ? <LogoutButton /> : <LoginButton /> } </nav> );

I was hoping someone would mention this. Between this and an extended rant about `dangerouslySetHtml`, I would say this author was really scraping hard to find negative things about React. Poor quality article.

I use these a bit and think they're great! If your logic is more complicated than one line it doesn't belong in there.

Fully agree. To call lack of conditionals a "limitation of JSX" is also very misleading. JSX is a pretty simple wrapper for Javascript function calls. The fact that you can't put an if statement in your JSX is due to the fact that you can't supply an if statement as an argument to a Javascript function.

I consider it a big positive that you can't.

If you really need to, I don't mind this pattern...

{conditional && (

  <div>throw whatever you want</div>
  <div>in here.</span>

)}

Of course, this doesn't actually work, because you have two root elements in that expression. You have to wrap them in an enclosing tag or inject them another way.

Reply on news.ycombinator.com