I am using reactJS and I am using some conditions to show my components. The code below is properly working. It show my success message without any problem. The FINALMESSAGE.showFinalMessage = true and FORMSTATUS["loadingForm"] = false
{FINALMESSAGE.showFinalMessage && !FORMSTATUS["loadingForm"] && <FinalMessageSave></FinalMessageSave>}
But when I add a condition with string like this:
{FINALMESSAGE.showFinalMessage && FINALMESSAGE.finalMessageStatus === "SUCCESS" && !FORMSTATUS["loadingForm"] && <FinalMessageSave ></FinalMessageSave>}
it doesnt work anymore even the FINALMESSAGE.showFinalMessage = "SUCCESS"
Here is the screenshot of my state
Related
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 am new to React. I have a very simple form which contains employer address details. I would like to validate if any of the fields got value, then check if length is <=10 and if not exists the it is fine. There are no mandatory validation and only length valiation if exists.
currently doing like below:
const isValid=
employer.address == null ||
(employer.address != null &&
(employer.address.building?.length <= 2) &&
employer.address.street?.length <= 2 &&
employer.address.county?.length <= 2 &&
employer.address.city?.length <= 2 &&
employer.address.postcode?.length <= 2);
Is there a better way to test to check validation if it contains value and ignore if not.
it is neither bad nor the best way
with current code you can do a bit clean Up to make it look nicer
you can assign a const to employer.address so no need to repeat it
const emp = employer.address
const isValid=
!emp||
(emp&&
(emp.building?) &&
emp.street?&&
emp.county?&&
emp.city? &&
emp.postcode?);
in the example above validation works if data is '' but if it has anything inside it ('s') validation would not be called
i think it should work same way
also there are some packages that provide you validation
redux form
https://redux-form.com/8.3.0/
yup
https://www.npmjs.com/package/yup
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.
After making a REST request, I want to check if the ListView dataSource has received data. My code looks to something like
if(this.state.dataSource.length == 0){
return (
<Text> No data </Text>
);
I always get an error telling me that this.state.dataSource.length is undefined. You can find a minimal example in this snack.
You can do it like :
if ( this.state.dataSource && this.state.dataSource.length == 0 ) {
// your code
}
You want to make sure this.state.dataSource has been initialized to an empty array when your component is created. That way, this.state.dataSource.length === 0 will be true until your data is fetched.
Now, I am using a check box to disable/undisable other buttons's click.
My code is here:
<button class="dateicon" ng-disabled='ExpReport.Beld' ng-click="openstart($event)">button1</button>
<button ng-disabled='ExpReport.Beld' class="dateicon" ng-click="openend($event)">button2</button>
<input id='beld' ng-model='ExpReport.Beld' class='checkboxinline' type='checkbox'/>
$scope.ExpReport.Beld = false;
$scope.$watch('ExpReport.Beld',function(){
if($scope.ExpReport.Beld=true){
$scope.ExpReport.startdate = '';
$scope.ExpReport.enddate = '';
}
})
it seems like the checkbox is always set false, when I make a breakpoint, it will set true,then turn back to false immediately. any idea?
The following line
if($scope.ExpReport.Beld=true){
is actually assignment of the $scope.ExpReport.Beld variable, not a comparison. Make sure you use double or triple equals.
if($scope.ExpReport.Beld == true){
or
if($scope.ExpReport.Beld){
will work just fine.
if($scope.ExpReport.Beld=true){
this line. If you are doing a comparison, use == or ===