Closed
Description
Is there an existing issue for this?
- I have searched the existing issues and my issue is uniqueMy issue appears in the command-line and not only in the text editor
Description Overview
#3538 (see #3537) fixes a template literal with a single placeholder to just be that placeholder.
This can change the semantics of the prop:
const foo = 123;
<Component foo={`${foo}`} />
casts foo
to a string (and thus passes "123"
), while the "fixed"
const foo = 123;
<Component foo={foo} />
passes foo
as a number 123
; when using TypeScript and Component
expects foo: string
, that's a type error. When not using TypeScript, if Component
behaves differently with a string prop cf. a number prop, this changes that behavior.
This also stands for children:
<span>An error occurred: {`${err}`}</span>
will be changed to
<span>An error occurred: {err}</span>
which can be a type error if err
is not a valid React child (and when not using TypeScript, it can cause e.g. false
not to get rendered as text.
Expected Behavior
Whether template literals with a single placeholder are unwrapped should be configurable.
eslint-plugin-react version
v7.33.0
eslint version
v8.45.0
node version
v20.3.0
Activity
akx commentedon Jul 21, 2023
cc @taozhou-glean
akx commentedon Jul 21, 2023
[Fix] `jsx-curly-brace-presence`: make unwrapping single-expression t…
jsx-curly-brace-presence
: make unwrapping single-expression template literals configurable #3608taozhou-glean commentedon Jul 21, 2023
did not realize use case like this until now, thanks for raising and fixing!
ljharb commentedon Jul 21, 2023
Indeed, I think #3538 needs to be reverted.
Revert "[Fix] `jsx-curly-brace-presence`: handle single and only expr…
Revert "[Fix] `jsx-curly-brace-presence`: handle single and only expr…
Revert "[Fix] `jsx-curly-brace-presence`: handle single and only expr…
Revert "[Fix] `jsx-curly-brace-presence`: handle single and only expr…