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

21–30 of 127 posts

Re: Advice on JSX Conditionals

#21

Post by bern4444 »

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 }}

I'm surprised this doesn't work since you could easily externalize this to a function:

  
    
    {getCorrectComponent(page)}
    
  

  const getCorrectComponent = (page) => {
    switch (page) {
      case 'home': return 
      case 'about': return 
      default: return 
    }
  }

Re: Advice on JSX Conditionals

#22

Post by molf »

9wzYQbTYsAIc wrote: post #11
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

Yes, I'm well aware of how to use these. I will elaborate on why I think it's terrible (even though there is no alternative in standard JS yet):

* It encourages JSX-specific idioms. Outside of JSX, using `&&` instead of `if` for control flow would raise eyebrows from most people, I think.

* I find it easier and faster to refactor `if` statements to `if/else` and vice versa (only requires addition or deletion of code) than to refactor `&&` to a ternary operator and vice versa (also requires modifying existing code).

* Multiple nested ternary operators almost immediately become a mess, while a series of `else if` expressions (if such a thing existed) seem perfectly readable.

Re: Advice on JSX Conditionals

#23

Post by Eric_WVGG »

9wzYQbTYsAIc wrote: post #17
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”.

yeah, I use reach/router for this kind of thing. A page switcher was just the first example that popped into my head.

Here's a real world example if it matters…

  const Grid = (gridItems) => (
    
      {gridItems.map(item => (
        
      _}
    
  )}

  const GridItem = (props) => {
    switch(props._type) {
      case 'image': return 
      case 'video': return 
      case 'copy': return 
      // slideshows, 3D stuff, newsletter signup forms…
      default: return 
    }
  }
… and I suppose a case could even be made for the granularity of this superfluous component… but regardless this is just a minor annoyance that comes up from time to time.

Re: Advice on JSX Conditionals

#24

Post by Eric_WVGG »

bern4444 wrote: post #21
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 }}

I'm surprised this doesn't work since you could easily externalize this to a function: {getCorrectComponent(page)} const getCorrectComponent = (page) => { switch (page) { case 'home': return case 'about': return default: return } }

that does work. imo ugly, not straightforward

Re: Advice on JSX Conditionals

#25

Post by redler »

9wzYQbTYsAIc wrote: post #11
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

Another quick option for avoiding the "zero" issue:

  {!!number && }

Re: Advice on JSX Conditionals

#26

Post by TameAntelope »

matt-attack wrote: post #9
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.

I find ternaries alone to be totally adequate.

Oh they work, but stacking them tends to make future reading of the code harder due to their increased complexity.

Re: Advice on JSX Conditionals

#27

Post by ryanto »

Great article!

I will say I've found that using prettier makes nested ternaries much more readable.

I couldn't imagine using them without prettier, but since every app I work on these days uses prettier nested ternaries aren't so bad.

Re: Advice on JSX Conditionals

#28

Post by 9wzYQbTYsAIc »

redler wrote: post #25
9wzYQbTYsAIc wrote: post #11

Earlier quoted context omitted.

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

Another quick option for avoiding the "zero" issue: {!!number && }

One of the joys of JavaScript, right there: not-not sorry.

Re: Advice on JSX Conditionals

#30

Post by laurent123456 »

I think a better approach is to move the logic to a renderXxx() function:

    function renderInput(props:Props) {
        // Early exit if props are not as expected
        if (!props.cond1) return null;
        return ;
    }
Then the parent markup is much cleaner, without any conditional:

    {renderInput(props)}
Post reply on HN