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-dollar

Full Name in @eslint-react/eslint-plugin

@eslint-react/no-leaked-dollar

Features

🔧

Presets

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.

Common Violations

Invalid

function MyComponent({ user }) {
  return <div>Hello ${user.name}</div>;
  //                ^ Possible unintentional '$' sign before expression.
}

function MyComponent({ user }) {
  return <div>${user.name} is your name</div>;
  //          ^ Possible unintentional '$' sign before expression.
}

function MyComponent({ count, total }) {
  return <div>Progress: ${count} / ${total}</div>;
  //                     ^         ^ Possible unintentional '$' sign before expression.
}

Valid

function MyComponent({ user }) {
  return `Hello ${user.name}`;
}

function MyComponent({ user }) {
  return <div>Hello {user.name}</div>;
}

function MyComponent({ price }) {
  return <div>${price}</div>;
}

Rule Details

Common Violations

Invalid

Valid

Resources

Further Reading

See Also

On this page