question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Trivial else (suggestion/enhancement)

See original GitHub issue

I find I have a common pattern of

<Choose>
  <When condition={foo}>one-liner</When>
  <Otherwise>
    a lot of stuff
  </Otherwise>
</Choose>

It kind of makes me want to just use a ternary; the control statements are neither succinct or clear/intent-expressive.

The one-liner in question will be a marker for “field not present”, an icon, a <NotFound/> component, and in some cases even a single space.

An alternative which I think would make sense is something like:

<SomeControlTag condition={!foo} someprop="one-liner">
  a lot of stuff
</SomeControlTag>

While having jsx in props looks weird, it’s completely valid, and I’ve used it a couple of times with react-bootstrap stuff. I wouldn’t recommend it for longer values, but it’s fine for short stuff. So, you could in fact also have, someprop={<NotFound/>}.


Now, assuming this is a good idea at all, what does the actual tag and prop look like?

My first instinct was to add this to <If>:

<If condition={!foo} else="one-liner">

The problem should be obvious though… having “else” before “then” feels really odd. But I don’t know if that objection is strong enough to justify loading the namespace with a new tag that does mostly the same thing as <If>.

Here’s a weird alternative, I don’t like but I’ll write it down anyway:

<If condition={foo} then="one-liner" else>
  stuff
</If>

Anyway. Please discuss 😺

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:7 (2 by maintainers)

github_iconTop GitHub Comments

3reactions
texttechnecommented, Mar 5, 2017

In my opinion the succinct version would be the flat if-else.

<If condition={foo}>
  a lot of stuff
</If>
<Else>
  one-liner
</Else>

Discussion #32

0reactions
texttechnecommented, Mar 5, 2017

I don’t think that the deprecated Else-Syntax needs to be revived. In your suggested version it is not as readable as it should be: <If> and <Else> should be on the same indentation level. The XML-way is <choose> and works like that in XSL-T.

Regarding the abbreviated syntax, you already name the counter-argument: Edge cases which make less and less sense. Additionally, one of the most prominent React arguments is: Keep the API surface as small as possible. And React really lives up to this mantra, if you think about it.

I’m also not convinced that writing

<If condition={toBeTested} else="Just a result string!">
  ...
</If>

is more readable than, e.g.

<If condition={toBeTested}>
   ...
</If>
<If condition={!toBeTested}>
  Just a result string!
</If>

From my point of view I would always expect the else branch on the same level as the if branch. I can’t imagine that users wouldn’t be confused by the abbreviated syntax…

Read more comments on GitHub >

github_iconTop Results From Across the Web

What is the benefit of terminating if … else if constructs with an ...
In MISRA-C:2012, which supersedes the 2004 version and is the current recommendation for new projects, the same rule exists but is numbered ...
Read more >
Questioning Strategies - CITL
Choose material which you consider important rather than trivial. Students will study and learn based on the questions you ask.
Read more >
Cognitive Interview Technique - Simply Psychology
The cognitive interview (CI) is a questioning technique used by the police to enhance retrieval of information about a crime scene from the...
Read more >
Best practices for writing code comments - Stack Overflow Blog
Rule 5: Explain unidiomatic code in comments. It's a good idea to comment code that someone else might consider unneeded or redundant, such...
Read more >
According to Jira, What is Blocker, Critical, Majo...
Hi all - blocker in scrum means that something is blocking the story/epic from being worked on during the sprint. It has a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found