Zero(0) not showing in jsx - reactjs

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.

Related

What is the meaning of " ?? " in conditional operator in React Native?

I have been encountering with this conditional operator,
phone={this.props.projectDetails?.agency?.phone ?? this.props.projectDetails.phone }
I wanted to use Phone number that is given in agency?.phone but at some point we didn’t had phone number in agency so we were using projectDetail's phone so overcome this issue.
it's Nullish coalescing operator and in your case exactly equal to this :
phone={this.props.projectDetails?.agency?.phone ? this.props.projectDetails.agency.phone : this.props.projectDetails.phone }
Nullish coalescing operator means If is null or undefined you will render projectDetails.phone prop
In case if we don't have any else condition , use Nullish coalescing operator (??)
this.props.projectDetails?.agency?.phone (if it has value) ?? (then show) this.props.projectDetails.phone
.. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

"Type 'null' cannot be used as an index type" TS

I receive an error in Typescript code when I use my "language" const: "Type 'null' cannot be used as an index type."
const language =
localStorage.getItem("language") !== null
? localStorage.getItem("language")
: "en";
someText = someArray[language];
How can I fix it and why isn't working when I prevent language const from being null?
(I know that index selector must by string/number)
The problem here (and the reason why TypeScript cannot infer the correct type of language) is that localStorage.getItem("language") is being evaluated two times, and it could as well - for what the compiler knows - return null upon the second invocation.
Use the ?? operator to exclude the possibility of language being null.
const language = localStorage.getItem("language") ?? "en";
someText = someArray[language];
You can just tweak your code a bit using Nullish Coalescing operator (??), which is basically what is share by GOTO. Just explaining it's name & working.
let someText = someArray[(localStorage.getItem("language") ?? "en")]
From MDN docs,
The nullish coalescing operator (??) is a logical operator that returns its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand.

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 fix a conditional problem in react

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

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