Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Advice on JSX Conditionals

thoughtspile.github.io

Post reply on HN
Print view View original

11–20 of 127 posts

Re: Advice on JSX Conditionals

#11

Post by 9wzYQbTYsAIc »

molf wrote: post #3

I've always found these approaches to writing conditions in JSX to be terrible. Wouldn't it be nice if JavaScript were an expression-oriented language? Then you could just write: {if (gallery.length) { }} There has been a "do expressions" proposal [0] for many years, which addresses this (though it is more verbose). I hope it will be accepted some day. [0] https://github.com/tc39/proposal-do-expressions

From the article:

“{number && } renders 0 instead of nothing. Use {number > 0 && } instead.”

Functional JSX would look like:

const isNumber = number > 0;

{isNumber && }

You can similarly do things like:

const isVisible = condition1 && (condition2 || condition3) || guard(props.input1);

{isVisible && }

The functional paradigm and some basic code factoring can make quick work of conditional JSX

Re: Advice on JSX Conditionals

#12

Post by eyelidlessness »

Kaotique wrote: post #4

I actually really like the nested ternaries. TypeScript understand them very well and you don't have to extract your code outside the render to start using if/else structures. They also format quite well.

I like ternary conditionals, nested or otherwise. But I also like reduce. And regular expressions. And I know a lot of other devs hate some or all of them. So I tend to use them sparingly when working with a team… although I do see more ternaries in idiomatic code these days, generally as devs embrace a more FP style.

Re: Advice on JSX Conditionals

#13

Post by phailhaus »

When logic gets more complicated than a single ternary (e.g., handling pending/error/result state), I've found that a `useMemo` gives me the flexibility I need. It also keeps the messy logic out of the final JSX, which tends to make it read better.

Re: Advice on JSX Conditionals

#15

Post by eyelidlessness »

tuyiown wrote: post #6

I've learnt most of those the hard way, event though TSX is a great safe guard because I tend to slip. I find funny the persistance in sidestepping a `.length > 0` at all costs.

Personally I hate implied casting of booleans (and implied casting generally), and go out of my way to make boolean checks explicit whenever I touch the code. These kinds of shortcuts made some sense when minification was commonly a manual thing. But now, I want code to be as verbose as necessary for it to be unambiguous.

Re: Advice on JSX Conditionals

#17

Post by 9wzYQbTYsAIc »

Eric_WVGG wrote: post #16

Drives me nuts that there's no straightforward way to do a switch statement in JSX. {switch (page) { case 'home': return case 'about': return default: return }}

The example you put forward could be resolved through using a router. The router implementations are essentially fancy switches without ”switch”.

Re: Advice on JSX Conditionals

#18

Post by 9wzYQbTYsAIc »

phailhaus wrote: post #13

When logic gets more complicated than a single ternary (e.g., handling pending/error/result state), I've found that a `useMemo` gives me the flexibility I need. It also keeps the messy logic out of the final JSX, which tends to make it read better.

The React maintainers did put a lot of effort into making hooks. The variety of hooks seem to cover all the use cases for programming.

Re: Advice on JSX Conditionals

#19

Post by vlunkr »

TameAntelope wrote: post #8

I just avoid most of it by moving the complex conditional logic into a separate component and rendering that. I don't think I've run into many issues with this strategy, and keeps my return statements nice and clean.

Agreed, if it's more complex than a single ternary, or && statements, make a new component.
Post reply on HN