jsx-dollar

Full Name in eslint-plugin-react-x

react-x/jsx-dollar

Full Name in @eslint-react/eslint-plugin

@eslint-react/jsx-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