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
Related
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.
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.
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
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.
How can I do an ng-hide inline expression like this:
ng-hide="userType!=user"
?
what is your userType ?? a string ? and you want to hide if != 'user'
ng-hide="userType!='user'"
please check this answer about ng-hide/ng-show
The ngHide directive would not work on an inline expression. The inline expression is evaluated and then the result is injected in the HTML element containing the expression.
If the inline expression is just plain text, you could try the following:
{{ userType != user ? "" : value }}
or if you do not want an empty string you could also use "null"
{{ userType != user ? null : value }}