Home > database >  ESLint enforce returning JSX directly when possible in React arrow function components
ESLint enforce returning JSX directly when possible in React arrow function components

Time:02-01

Take these two components

const Good = () => <p>Content</p>;

const Bad = () => {
  return <p>Content</p>;
};

I want an eslint rule to enforce the syntax of the first "Good" component whenever possible. Obviously this syntax is only possible when we don't have hooks or other logic inside the component.

Does this exist?

CodePudding user response:

You are searching for this rule:

"arrow-body-style": ["error", "as-needed"]
  • Related