JSX React brackets comparing values - reactjs

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

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.

Why does passing a static dependency to an useEffect causes it to be called every render?

Why does the following useEffect is fired on every render if the dependency never changes?
useEffect(() => {
console.log('Here')
}, [['1', '2', '3']]);
Each item of dependency array is checked using strict equality. That means it uses the === operator.
So it checks if oldDeps[0] === newDeps[0] and then checks oldDeps[1] === newDeps[1], and so on. It will execute the effect if any of those checks are false.
Lastly, two arrays with the items are not strictly equal:
[1,2,3] === [1,2,3] // false
const a = [1,2,3]
const b = a
a === b // true
This is because they are two different arrays, they just happen to contain the same content. But in the above code, a === b is true because both variables reference the same array.
Typically, you do not want to construct an array as one of a hooks dependencies for this reason. If you have a list of id's, you can do things like convert it to a string instead:
}, [[1,2,3].join('-')]);
This works because strings are strictly equal with the same content:
"1-2-3" === "1-2-3" // true

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.

ng-if with formName attribute in or condition

I am trying to hide or show my radio button using ng-if condition. Based on the formName return values.
<input type="radio" class="control-label" name="reportTypeRadios"
ng-value="reportType" ng-if="formName != 'DELETEREPORTTYPEENTITY' || formName != 'DELETEREPORTTYPESENTITY'"
ng-model="$parent.reportTypeRadio" ng-change="propertyRadioChanged(reportTypeRadio)">
{{reportType.reportTypeLabel}} </input>
But I am seeing the radio button in both forms. For some reason the ng-if condition does not work. Can someone suggest me what is wrong ?
formName != 'DELETEREPORTTYPEENTITY' || formName != 'DELETEREPORTTYPESENTITY'
This will always evaluate to true... Logically speaking:
If your formName is DELETEREPORTTYPEENTITY then your expression is going to be: (First part)false || (second part)true == true
If your formName is DELETEREPORTTYPESENTITY then your expression is going to be: true || false == true
If your formName is something else then your expression is going to be: true || true == true
I suspect that you wanted to write
formName == 'DELETEREPORTTYPEENTITY' || formName == 'DELETEREPORTTYPESENTITY'
so that you will only have the radio button showing up on those two forms that are named DELETEREPORTTYPESENTITY and DELETEREPORTTYPEENTITY, and nowhere else. Anyway, you should rework your condition to fit your needs.
The condition as in your code will always evaluate to true since formName can't be equal to both 'DELETEREPORTTYPEENTITY' and 'DELETEREPORTTYPESENTITY' at the same time.
Only way ng-if gets false is if both sides of || equate to false which can never happen.
I believe what you want to achieve here could be done by just one equality i.e.
ng-if="formName=='DELETEREPORTTYPEENTITY'"

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