react/jsx-no-literals: Add config to allow a set of strings

[benhollander]

I propose adding a config option to allow a specified list of strings to pass the react/jsx-no-literals rule. I'm finding myself writing code similar to the below pretty often.

Semi-contrived examples

// This would throw an error because of " - "
// Can't do {' - '} because it will be rendered as text instead of an HTML entity
export const DisplayRangeComponent = (props) => (
  <div>
    {/* eslint-disable react/jsx-no-literals */}
    {props.min}&nbsp;-&nbsp;{props.max}
    {/* eslint-enable react/jsx-no-literals */}
  </div>
);

// This would throw because of '*'
export const AddAsterisk = ({ children }) => (
  {/* eslint-disable react/jsx-no-literals */}
  <span>{children}*</span>
  {/* eslint-enable react/jsx-no-literals */}
);

It could be convenient (at least in my use-case, which doesn't seem like it would be all that uncommon) to pass in a config like

rules: { 'react/jsx-no-literals': [ 'error', { ignoreStrings: [ ' ', '*' ] } ] }

[ljharb]

Is there a reason you can't do: {this.props.min}{' - '}{this.props.max}?

[benhollander]

Is there a reason you can't do: {this.props.min}{' - '}{this.props.max}?

That will cause the   to be displayed in the browser rather than be escaped.

I made a codepen to maybe illustrate the problem more clearly: https://codepen.io/bhollander/pen/zgmGyj

renders as

[ljharb]

ah right, then  {'-'} ?

[benhollander]

That would still fail the eslint rule in question. 😅

[ljharb]

Gotcha.

In that case, allowing an array of strings to ignore seems reasonable.