[Bug]: jsx-curly-brace-presence template literal fix can break things #3607
Closed
Description
Is there an existing issue for this?
- I have searched the existing issues and my issue is unique
- My 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