Skip to content

[Bug]: jsx-curly-brace-presence template literal fix can break things #3607

Closed
@akx

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

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions