How to fix a conditional problem in react - reactjs

I am using a condition such that if activeCardId is null nothing returns otherwise it would return something.It is working fine for all values except 0. It is returning nothing when value is 0.
I think it's related to 0 and null.
constructor(props) {
this.state = {
activeCardId: null
}
}
return(
{this.state.activeCardId && ( // some random output...)
As this statement means if activecardId is not null then return some random output and return nothing if activecardId is null.

It's because, you are using logical AND (&&).
0 means falsy value, and logical AND dosen't return anything for false values, you should try this
{this.state.activeCardId !==null && ( // some random output...) }

0 is a falsy value so
this.state.activeCardId
becomes false

this would do the job:
return(
{this.state.activeCardId!==null && ( // some random output...)
there is difference between null and 0 ,
0 is a value, 0 is also falsy in boolean statement
while null represents the intentional absence of any object value.
taken from : MDN Null-javascript

Related

Zero(0) not showing in jsx

Created a state with a default value of null
const [zero, setZero] = useState(null)
If we set the state, via setZero(0), to 0, the jsx is not showing 0.
In jsx:
{zero ? zero : "No data"}
It gives "No data" as a output.
How to show zero value 0 in jsx?
Zero is falsy, so zero ? will result in the alternative expression being used, the No data. Use the nullish coalescing operator instead.
{ zero ?? "No data" }
which evaluates to the right-hand side if the left side is undefined or null.

JSX React brackets comparing values

Can someone expalain this code to me? I am getting a (false && false && why are you comparing a hyperlink markup?
{id === constants.ACCOUNT_NO && sessionState['backBtnAddressDetails'] &&
Confirm details }
The logic that the chained &&s implement is: the final expression in the chain, that is, the
Confirm details
gets rendered only if the prior two expressions are truthy.
Another way of doing the same thing would be:
{showConfirmLink()}
const showConfirmLink = () => {
if (id !== constants.ACCOUNT_NO || !sessionState['backBtnAddressDetails']) {
return null; // don't render anything
}
return Confirm details;
};
Another example of this, outside of React:
const theValue = 'abc' && true && 'theValue';
console.log(theValue);
If any of the expressions in an && chain are falsey, the chain stops evaluating there, and the whole thing resolves to that falsey expression. Otherwise, it evaluates to the final expression in the chain.
This type of expression is referred to as conditional rendering in React ,
basically if the condition is true, the element right (the Confirm details element in your case ) after && will appear in the output. If it is false, React will ignore and skip it.
it could mean the id and constants.ACCOUNT_NO aren't of the same type (when you use the === operator it strictly compares the types too )
another possibility is sessionState['backBtnAddressDetails'] could be null

How to check if the value of the span element is equal to another value using react testing library?

i want to test if the value of span element is equal to another constant.
What i am trying to do?
I have a span element like below
render = () => {
const compare_value = 5
const span_value = 5
return (
<span data-test-id="test">{span_value}</span>
);
}
Now within my test i do this
const span_element = getByTestId('test');
const value = span_element.innerHTML //this value is "5" a string
expect(value).toBe(compare_value);
Here in the expect statement i get error object.isequality
I get this error since value is string "5" and compare value is integer 5.
How can i fix this. could someone help me with this. I want to test if the value of spanelement is equal to the compare_value.
Thanks.
Cast one of the values ( value or compare_value) to string.
String(compare_value)
//or
compare_value.toString()

my conditional returns undefined instead of true/false

I'm using angularjs and trying to set up a flag on the front end for my ng-if. I wanted to consolidate the logic in the controller but the the ng-if is only returning true and never false.
I need some efficient way for my code to return false if conditions are not met instead of returning undefined.
vm.showLocButton = !vm.isSupervisorReviewApp && vm.application.benefitPeriod.program.programType.id === vm.constants.programTypeId.directBill && vm.application.applicationStatus.code === vm.constants.applicationStatus.locIssued;
Dont know exactly but I see '=' instead of '==' are you assigninv the value or comparing if comparing than try using '=='
vm.showLocButton == !vm.isSupervisorReviewApp && vm.application.benefitPeriod.program.programType.id === vm.constants.programTypeId.directBill && vm.application.applicationStatus.code === vm.constants.applicationStatus.locIssued;
It will really helpful if you can post the entire code.

if(something) vs if(something===true)

I was doing some self-learning about cakephp (version 1.26).
I got a simple HTML input text field like this:
<input type="text" name="data[testing][name]" id="data[testing][name]">
The value from the Input text box field was checked against the database.
If the value matches the data stored in the database, it will return true.
Here is the code:
{
$t=$this->data;
$result=$this->User->findByname($t['testing']['name']);
if($result){ //doing something;}
}
I came across a question when I altered the code above with a little change,
but then it failed to work then:
{
$t=$this->data;
$result=$this->User->findByname($t['testing']['name']);
if($result===true){ //doing something;}
}
Could anyone help please?
You are using strict type comparison with === rather than ==, this implies that $result is actually not equal to true there by making the condition fail. Try to see what does come though in the $result variable:
var_dump($result);
Or try this condition with (==):
if($result == true){ //doing something;}
Or simply:
if ($this->User->findByname($t['testing']['name'])){ //doing something;}
Assuming here that findByName returns some kind of object or array. if you use if ($result) this object/array will be cast to a boolean.
If however you use if ($result === true) you're strictly comparing an object/array to the boolean true, this comparison will always evaluate to false.
The PHP reference has a very nice explanation of how type comparison is done. The quick answer is that you are now doing a much stricter comparison, and some edge cases are falling through the cracks. You will probably be fine with $result == true
http://php.net/manual/en/language.operators.comparison.php
That's because $result === true checks, if $result value is true.
But your $result variable contains results from the database.
Coarsely, the if operator casts your argument into a boolean and evaluates it. So if($result) converts $result into true or false. On the other hand, === actually checks for both type and "value" equality, so true === $val will only return true if $val is the boolean true. === obviously returns a boolean, so no casting is necessary for the subsequent evaluation within if. What this means for you is that if($result) processes the block if $result casts into true. Examples of things that become true are 1, '1', and new Object(). Conversely, if($result===true) doesn't immediately cast $result. It checks it in type and "value" against boolean true.
If $result is, say 1, the former control structure will process the block, but the latter won't.
=== means equal AND the same type of what you equaling to...
but $result contains data from db..so it's not Boolean...
use == instead:
if($result==true)
In your code, when there is a result, the return is non-zero, therefore it will evaluate to true.
=== is the identity operator and will return true when the two objects are identical
e.g. 1===1 (true) true===true (true) true===1 (false)
== is the equality operator and will return true when the two objects are equal or equivalent.
e.g. 1==1 (true) true==true (true) true==1 (true)
findByName will return an array or unset. unset will equate to false and an array will equate to true.
the value true itself is never returned in your code, so === will never be true.

Resources