最好的方法也是检查 React Js 中的 false & true 条件

Question

what is the best way to check the false & true condition in this case, i have a state set to false initially

status: false,

The status changes to true if a certain props is present (data-widget) do i need to add the ="true" to the attribut?

<div id="app" data-widget></div>
// Is it the same thing or i don't need to add the ="true" to the attribut
<div id="app" data-widget="true"></div>

Here is how i check a condition, i am confused which one i should use:

//Option 1
newData.status = this.props.widget ? true : false
//Option 2
newData.status = (typeof this.props.widget !== "undefined") ? true : false

Is there a better/correct way to handle the false & true condition?

Answer 1

They are both same, but 'option2' is just checking if the value exist and is better for handling errors. So I think it will be better to use the second option. And some attributes have default value, I think "data-widget" have default true

Answer 2

Is there a better/correct way to handle the false & true condition?

There's no " the best" way, it all depends on conditions. Even if they are looking similar they strongly differ. The first option will evaluate to true if props.widget is truthy - (it's either an array , object , true, number (different that 0 ) or a non-empty string.

However the second one will evaluate to true if props.widget is not equal to undefined . It will evaluate to false ONLY if props.widget is undefined .

Anyways, if it's acceptable for your conditions, I would go with simple checking the truthyness of props.widget :

newData.status = Boolean(this.props.widget); // will evaluate to true or false
                                             // with no need to use ternary