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?

>Solution :

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