jsx-dollar

Full Name in @eslint-react/eslint-plugin

@eslint-react/jsx-dollar

Full Name in eslint-plugin-react-x

react-x/jsx-dollar

Features

🔧

Description

Prevents unnecessary dollar signs ($) from being inserted before an expression in JSX.

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.

import React from "react";

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

When refactored to JSX, it might look like this:

import React from "react";

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

Failing

import React from "react";

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

Passing

import React from "react";

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

import React from "react";

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

import React from "react";

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

Legitimate uses

If you legitimately need to output a dollar sign before an expression (for example, to display a price), you can wrap it in a template literal or use a string literal.

import React from "react";

function MyComponent({ price }) {
  // 🟢 Good: This is a legitimate use of the '$' character.
  return <div>{`$${price}`}</div>;
}

function AnotherComponent({ price }) {
  // 🟢 Good: Another legitimate way to display a price.
  return <div>${price}</div>;
}