48 lines
1.6 KiB
Plaintext
48 lines
1.6 KiB
Plaintext
== Why is this an issue?
|
|
|
|
One can use logical AND (`&&`) operator to conditionally render in React (aka short-circuit evaluation). `myCondition && <MyElement />` will return `<MyElement />` if `myCondition` is `true` and `false` otherwise. As React renders boolean values to nothing, when condition is `false`, nothing will be rendered as intended. But if the condition has a non-boolean value which evaluates to `false` (e.g. `0`), that value will leak into the rendered result.
|
|
|
|
This rule will report when the condition has type `number` or `bigint`.
|
|
|
|
If React Native is used, the type `string` will also raise an error, as your render method will crash if you render `0`, `''`, or `NaN`.
|
|
|
|
Note that along with short-circuit evaluation, in order to achieve conditional rendering it's possible to use ternary operator (`myCondition ? <MyElement /> : null`), which is less error-prone in this case as both return values are explicit.
|
|
|
|
=== Noncompliant code example
|
|
|
|
[source,javascript]
|
|
----
|
|
function Profile(props) {
|
|
return <div>
|
|
<h1>{ props.username }</h1>
|
|
{ props.orders && <Orders /> } { /* Noncompliant, 0 will be rendered if no orders available */ }
|
|
</div>
|
|
}
|
|
----
|
|
|
|
=== Compliant solution
|
|
|
|
[source,javascript]
|
|
----
|
|
function Profile(props) {
|
|
return <div>
|
|
<h1>{ props.username }</h1>
|
|
{ props.orders > 0 && <Orders /> }
|
|
</div>;
|
|
}
|
|
----
|
|
|
|
or
|
|
|
|
[source,javascript]
|
|
----
|
|
function Profile(props) {
|
|
return <div>
|
|
<h1>{ props.username }</h1>
|
|
{ props.orders ? <Orders /> : null }
|
|
</div>;
|
|
}
|
|
----
|
|
|
|
== Resources
|
|
* https://reactjs.org/docs/conditional-rendering.html[Conditional Rendering] - conditional rendering in React |