JavaScript

JavaScript

Made by DeepSource

Prevent usage of string literals in JSX JS-0420

Style
Major
react

The issue is raised when the analyzer encounters a string literal inside a react component. We recommend wrapping the string literals in a JSX Container, e.g., {'Text'}.

There are a few scenarios where you want to avoid string literals in JSX as follows:

  • Enforce consistency of code
  • Executing JavaScript for multi-purpose use cases e.g. translation system, template literal expression

Bad Practice

var Hello = <div>test</div>;

Recommended

var Hello = <div>{'test'}</div>;