no-leaked-dollar
Catches '$' before '{expr}' in JSX — typically from template literal '${expr}' being copy-pasted into JSX without removing the '$'. The '$' "leaks" into the rendered output.
Full Name in eslint-plugin-react-jsx
react-jsx/no-leaked-dollarFull Name in @eslint-react/eslint-plugin
@eslint-react/no-leaked-dollarFeatures
🔧
Presets
jsx
recommended
recommended-typescript
recommended-type-checked
strict
strict-typescript
strict-type-checked
Rule Details
This can happen when refactoring from a template literal to JSX and forgetting to remove the dollar sign. This results in an unintentional $ being rendered in the output.
function MyComponent({ user }) {
return `Hello ${user.name}`;
}When refactored to JSX, it might look like this:
function MyComponent({ user }) {
return <>Hello ${user.name}</>;
}In this example, the $ before {user.name} is unnecessary and will be rendered as part of the output.
Examples
Leaving $ from template literals when refactoring to JSX
function MyComponent({ user }) {
// Problem: Possible unintentional '$' sign before expression.
return <div>Hello ${user.name}</div>;
}function MyComponent({ user }) {
// Problem: Possible unintentional '$' sign before expression.
return <div>${user.name} is your name</div>;
}function MyComponent({ count, total }) {
// Problem: Possible unintentional '$' sign before expression.
return <div>Progress: ${count} / ${total}</div>;
}Using correct JSX expression syntax
// OK: Template literals are fine outside JSX
function MyComponent({ user }) {
return `Hello ${user.name}`;
}function MyComponent({ user }) {
// Recommended: Remove the '$' when using JSX expressions
return <div>Hello {user.name}</div>;
}Intentionally rendering $ before a value
function MyComponent({ price }) {
// OK: Intentionally rendering '$' as literal text before a JSX expression
return <div>${price}</div>;
}Versions
Resources
Further Reading
See Also
react-jsx/no-leaked-semicolon
Catches;at the start of JSX text nodes — typically from accidentally placing a statement-ending;inside JSX. The;"leaks" into the rendered output.