[ESLint] react/jsx-boolean-value

Overview
jsx-boolean-value
jsx-boolean-value Configuration
jsx-boolean-value Linting
Designing Boolean Props
Conclusion

Overview

When writing JSX in React, there are two ways to pass a true value to Boolean Props.

// Explicitly pass true
<Hello personal={true} />

// Omit the value to pass true
<Hello personal />

Both work identically, but it is better to unify the style for code consistency. Since JSX treats an omitted value as true, omitting {true} is more concise and readable.

In this blog post, we will explore how to use ESLint’s react/jsx-boolean-value rule to enforce a consistent style for Boolean Props.

react/jsx-boolean-value: https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md

This blog post assumes that ESLint and eslint-plugin-react are already configured in your project.

For information on how to set up ESLint in a React project, please refer to the links below.

jsx-boolean-value

The jsx-boolean-value rule enforces a consistent notation for Boolean attributes in JSX. This rule is auto-fixable with the --fix option.

The following are examples with the default setting ("never").

Incorrect:

<Hello personal={true} />

Correct:

<Hello personal />

Simply omitting {true} makes the code more concise and reduces unnecessary code.

jsx-boolean-value Configuration

To configure the jsx-boolean-value rule, open .eslintrc.js (or your ESLint configuration file) and modify it as follows.

module.exports = {
  ...
  rules: {
    ...
    'react/jsx-boolean-value': ['error', 'never'],
  },
};

Options

The jsx-boolean-value rule provides the following options.

Option	Description
`"never"` (default)	Shows an error when `{true}` values are explicitly written.
`"always"`	Shows an error when the value is omitted.

When using the "never" option, you can additionally set the assumeUndefinedIsFalse option.

'react/jsx-boolean-value': ['error', 'never', { assumeUndefinedIsFalse: true }]

Setting this option to true enforces omitting the Props entirely instead of passing {false} to Boolean Props.

// When assumeUndefinedIsFalse: true

// Incorrect
<Hello personal={false} />

// Correct
<Hello />

jsx-boolean-value Linting

After completing the configuration, you can run ESLint to lint your code with the following command.

npx eslint .

If there are places where {true} values are explicitly written, the following error message will be displayed.

error  Value must be omitted for `true` props  react/jsx-boolean-value

You can auto-fix using the --fix option.

npx eslint . --fix

Running auto-fix will modify the code to the form with {true} omitted.

// Before fix
<Hello personal={true} />

// After fix
<Hello personal />

Designing Boolean Props

Applying the jsx-boolean-value rule allows you to write Boolean Props concisely without {true}. To make the most of this rule, it is also important to name Boolean Props so that they activate when true.

For example, let’s look at designing Props that control the disabled state of a component.

Incorrect Design

Using Props like isActive requires explicitly passing {false} to represent the disabled state.

// When using isActive
<Button isActive={false} />

This way, you always have to explicitly write {false} to pass false, so you cannot take advantage of the jsx-boolean-value rule.

Correct Design

By designing Props like disabled that activate the desired behavior when true, you can write concisely by omitting the value.

// When using disabled
<Button disabled />

When designing Boolean Props, naming them in the direction where the Props are more frequently used as true allows you to write more concise code together with the jsx-boolean-value rule.

Incorrect Design	Correct Design
`<Modal isVisible={false} />`	`<Modal hidden />`
`<Input isActive={false} />`	`<Input disabled />`
`<Text isWrapped={false} />`	`<Text nowrap />`

Conclusion

In this blog post, we explored how to write Boolean Props concisely in JSX using ESLint’s react/jsx-boolean-value rule. We also learned that naming Boolean Props to activate when true allows for more concise code.

Github Sponsor

Buy me a coffee

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.