Eslint react/jsx-one-expression-per-line: allow variables and JSX strings on the same line, but not elements

Question

E.g. for this JSX:

<h1>
  Hi {name}
</h1>

The react/jsx-one-expression-per-line plugin wants it as:

<h1>
  Hi
  {' '}
  {name}
</h1>

or

<h1>
  {`Hi ${name}`}
</h1>

I think both of those are ugly. I want to allow the first example. However, I don't want to disable the plugin because I don't want to allow multiple elements on one line:

<p>hi</p><p>bye</p>

How would I do this?

add this `"react/jsx-one-expression-per-line": "off"` to rules in your eslint configuration file — matrixersp, Sep 14 '19 at 07:16
I don't want to disable the plugin because I don't want to allow multiple elements on one line — Leo Jiang, Sep 14 '19 at 14:53
add this `"prettier/react"` to the `"extends"` part of your `.eslintrc`. See https://github.com/prettier/prettier/issues/6456#issuecomment-529075600 — ceoehis, Aug 29 '20 at 03:01

score 2 · Answer 1 · answered Jun 03 '21 at 11:43

2

How about this?

const welcomeMessage = `Hi ${name}`;
<h1>
  {welcomeMessage}
</h1>

answered Jun 03 '21 at 11:43

Dhanraj Acharya

473
1
4
15

You cannot declare const nor variables inside JSX which makes this useless when trying to add somethig as easy as #{element.id} inside a map. ESLint will expect both # and {element.id} to be alone in new lines (which makes it ugglier and harder to read). – JoelBonetR Mar 20 '22 at 22:07

score 0 · Answer 2 · answered Jul 25 '22 at 11:22

0

You can disable the rule for that line only:

<h1>
{/* eslint-disable-next-line react/jsx-one-expression-per-line */}
  Hi {name}
</h1>

answered Jul 25 '22 at 11:22

Paul Razvan Berg

16,949
9
76
114

Eslint react/jsx-one-expression-per-line: allow variables and JSX strings on the same line, but not elements

2 Answers2