How are boolean props used in React?

ghz 6months ago ⋅ 73 views

I'm trying to clarify some confusion I have about boolean props in React.

Suppose a have MyComponent with several boolean props prop1, prop2...

First: it seems that boolean props are like just others: you can define default values, either in defaultProps or in destructuring params:

const MyComponent = ({ prop1, prop2 }) => (
   ...
);

MyComponent.defaultProps = {
  prop1: false,
  prop2: true,
}

Or (equivalently... I think)

const MyComponent = ({ prop1 = false, prop2 = true }) => (
 ...
)

What's not clear is how to pass values. The natural "React style", again, seems to be

  <MyComponent prop1={ BOOLEAN_EXPRESION1 } prop2={ BOOLEAN_EXPRESION2 } />

... including the static literals (false/true).

However, it's also stated that the correct (recommended?) way to pass boolean properties is presence/absence of the attribute, as in HTML5.

So that, instead of <MyComponent prop1={true} prop2={false} />, one should write <MyComponent prop1 />.

My questions are:

  1. What is the correct way of passing boolean props? Are both acceptable?
  2. In case HTML5 style is the recommended (or correct) way, how would one deal with dynamic values?
  3. In case HTML5 style is acceptable, what about default values? In the example above (where prop2 is true by default), if I write <MyComponent />, what value would prop2 get?

Edit: To the accepted answer, I'd like to add my own tip: to play along nicely with the HTML5 style (and to prevent surprises), design your boolean props so that they are by default false. Put in other way: a boolean prop that defaults to true should be considered an antipattern.

Edit 2: It should be noted that sometimes the default of a boolean prop is undefined and that's (by design) treated differently than false, (eg: in Material UI's Checkbox the prop checked is true|false if the component is controlled, undefined if it's uncontrolled). Hence here the HTML5 convention cannot be used.

Answers

Let's address your questions regarding boolean props in React:

1. Correct Way of Passing Boolean Props

Both approaches are acceptable in React:

  • Explicit Boolean Values: <MyComponent prop1={true} prop2={false} />
  • HTML5 Style (Presence/Absence): <MyComponent prop1 />

Using explicit boolean values (true and false) is straightforward and often clearer in terms of readability, especially when the boolean props are derived from conditions or states.

On the other hand, the HTML5 style leverages the behavior of HTML attributes where the presence of an attribute (regardless of its value) implies true and its absence implies false. This style can be advantageous for simpler markup and is a valid approach in React.

2. Dealing with Dynamic Values

When dealing with dynamic values, the HTML5 style can still be used effectively by conditionally adding the attribute based on a boolean expression. For example:

const isProp1Enabled = true;
const isProp2Enabled = false;

<MyComponent prop1={isProp1Enabled} prop2={isProp2Enabled} />

This approach keeps the JSX clean and readable while dynamically setting boolean props based on conditions.

3. HTML5 Style and Default Values

If you are using the HTML5 style (<MyComponent prop1 />), React will set prop1 to true. For default values specified in defaultProps, they will be overridden only when you explicitly pass a different value.

For instance, if MyComponent has default props like this:

MyComponent.defaultProps = {
  prop1: false,
  prop2: true,
};
  • <MyComponent /> will have prop1 as false and prop2 as true (using default values).
  • <MyComponent prop1 /> will have prop1 as true and prop2 as true (overriding the default value of prop1).

Additional Tips

  • Default Values: Design your boolean props with default values that make sense for your component. As you mentioned, having boolean props default to false is generally more intuitive because it aligns well with the idea that a prop is "off" by default.

  • Handling undefined: If your boolean prop can be undefined (especially when used in controlled components or APIs like Material UI's Checkbox), you'll need to explicitly set the prop with a value (true or false) instead of relying on the HTML5 style.

Conclusion

Both styles of passing boolean props in React (<MyComponent prop1={true} /> and <MyComponent prop1 />) are valid and acceptable. Choose the style that aligns best with your codebase's conventions and readability needs. Use default props wisely to ensure expected behavior when props are not explicitly passed.

#javascript