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.

Last } is not on its own line for JSX

See original GitHub issue

I sometimes use the following format in JSX:

{booleanValue &&
    <div>only show this when booleanValue is true</div>
}

currently prettier outputs this in the following way:

{booleanValue &&
    <div>only show this when booleanValue is true</div>}

IMO I think the output should stay in the initial format.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:11
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
aaronjensencommented, Feb 21, 2017

for what it’s worth, I’ve seen the latter way more often in examples/actual code.

I wouldn’t consider the former an option just because it sort of convolutes two bracket styles. I’d say it’s either your latter or:

{
  booleanValue &&
    <div>...</div>
}

but that’s unnecessarily verbose. In short, I’d say it’s right as-is.

0reactions
rattrayalexcommented, Jul 14, 2017

Similar behavior has been merged in #2398 , closing

Read more comments on GitHub >

github_iconTop Results From Across the Web

newlines character ignored by jsx table - Stack Overflow
It's worth noting that white-space: pre will preserve your newlines, but it causes your text to no longer wrap. This means, provided it's...
Read more >
Conditional Rendering - React
Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like if or the conditional operator to create ......
Read more >
eslint-plugin-react/jsx-first-prop-new-line.md at master - GitHub
eslint-plugin-react/docs/rules/jsx-first-prop-new-line.md ... This rule checks whether the first property of all JSX elements is correctly placed.
Read more >
How To Create Custom Components in React - DigitalOcean
Now each component has its own directory, but not everything is fully independent. The last step is to extract the CSS for Instructions...
Read more >
Text - React Native
baseText , but the title provides its own additional styles. ... clip - Lines are not drawn past the edge of the text...
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