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.

Chained Short Circuit Conditionals in JSX

See original GitHub issue

Just upgraded to 1.6.1 and noticed that chained “short circuit” conditionals no longer get indented. Is this intentional?

v1.5.3

const Foo = (bar, baz) =>
  <div>
    {bar &&
      baz &&
      <span>hello there. make this long enough to wrap to the next line</span>}
  </div>

v1.6.1

const Foo = (bar, baz) => (
  <div>
    {bar &&
    baz && (
      <span>hello there. make this long enough to wrap to the next line</span>
    )}
  </div>
)

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:1
  • Comments:9 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
vjeuxcommented, Sep 5, 2017

@suchipi thanks for the context 😃 Enjoy your new place!

1reaction
suchipicommented, Sep 5, 2017

Not intentional; this is a bug.

Should we change it to A:

const Foo = (bar, baz) => (
  <div>
    {bar &&
      baz && (
        <span>hello there. make this long enough to wrap to the next line</span>
      )
    }
  </div>
)

B:

const Foo = (bar, baz) => (
  <div>
    {bar &&
      baz && (
        <span>hello there. make this long enough to wrap to the next line</span>
    )}
  </div>
)

or C?

const Foo = (bar, baz) => (
  <div>
    {bar && baz && (
      <span>hello there. make this long enough to wrap to the next line</span>
    )}
  </div>
)

(Or something else).

My preference is C or A.

Read more comments on GitHub >

github_iconTop Results From Across the Web

React conditional rendering: 9 methods with examples
Learn how to do conditional rendering in React. ... React element variables; The ternary operator in React; Short-circuit AND operator ...
Read more >
How to Level Up Your React Conditionals - freeCodeCamp
Use the ternary operator to write conditionals in your JSX​​ However, what if we don't want to write a conditional separate from our...
Read more >
How to do a nested if else statement in ReactJS JSX?
Here's an article on conditional rendering in React, so please check it out if you're interested in more details on this topic.
Read more >
React Conditional Rendering - Robin Wieruch
Everything you need to know about conditional rendering in React. ... It's also called short-circuit evaluation which makes it even more ...
Read more >
Short Circuit Evaluation with React - DEV Community ‍ ‍
Rendering these components using conditional rendering is something I enjoy coding, and I'm not sure why. It's not hard, it's sometimes not easy ......
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