I am using ReactJS and a library called React-Table for an online gaming site.
In the table, I have one column cell that could potentially be empty or NULL.
So, if that column cell is null or empty or undefined, then I want to show a value called, "Dungeon Master".
If it's not null or empty, then I just want to show what should be shown(row.original.gamerTag).
So I tried using a ternary operator to check, but no matter what, the value always shows empty.
Here is where I use it:
{
Header: 'Gamer Title',
accessor: 'gamerTitle',
Cell: ({ row }) =>
<a href="#" onClick={() =>
show(
row.original.id,
row.original.gamerTitle,
row.original.gameType,
(row.original.gamerTag == 'undefined' || '' || null) ? 'Dungeon Master' : row.original.gamerTag,
row.original.gameDescription,
)}>
{row.original.gamerTitle}
</a>
},
Am I using it wrong? I don't get any errors or anything.
Thanks!
Replace
(row.original.gamerTag == 'undefined' || '' || null) ? 'Dungeon Master' : row.original.gamerTag
By
typeof row.original.gamerTag === 'undefined' || row.original.gamerTag === '' || row.original.gamerTag === null ? 'Dungeon Master' : row.original.gamerTag
Two problem, the one is myVar == 'undefined' doesnt work because you compare string and not type. And secondly, in js is not short syntaxe for concat condition. Alternatively you can try [undefined, null, ''].includes(row.original.gamerTag).
Try replacing:
(row.original.gamerTag == 'undefined' || '' || null) ? 'Dungeon Master' : row.original.gamerTag
with:
(row.original.gamerTag == 'undefined' || row.original.gamerTag == '' || row.original.gamerTag == null) ? 'Dungeon Master' : row.original.gamerTag
Related
so I'm getting certain redmax and redmin values through props and I've stored them in a variable. The below code is inside render. This is how it looks:
if(props.gauge.id === 8){
let redMaxPressure = (props.gauge.params.red_max).split(',').map(function(i){
return parseInt(i,10)
})
let redMinPressure = (props.gauge.params.red_min).split(',').map(function(i){
return parseInt(i,10)
})
console.log('RedMax',redMaxPressure)
}
Now, I want to use those values inside the 'rect' svg but I'm unable to use that as it's throwing an error.
<rect
x={-0.305}
y={0.63}
rx={0.02}
width={0.6}
height={0.3}
fill={props.size !== 'small' && props.value <= redMaxPressure[0] ? rectColor : props.size === 'small' && props.value >=redMaxPressure[1] ? rectColor : '#ffffff00' }
stroke={'black'}
stroke-width={0.02}
/>
I'm getting an error for redMaxPressure[0] and redMaxPressure[1]. Is there a different way to use those values stored?
Note: The rect svg is inside return.
Your redMaxPressure, redMinPressure are not in scope of rect element, because currently they live (variables lifetime) only in if scope, so their values are undefined.
You should ensure they in scope:
let redMaxPressure = DEFAULT_MAX;
let redMinPressure = DEFAULT_MIN;
if(props.gauge.id === 8){
redMaxPressure = ...
redMinPressure = ...
}
return <rect fill={props.size !== 'small' && props.value <= redMaxPressure[0] ? rectColor : props.size === 'small' && props.value >=redMaxPressure[1] ? rectColor : '#ffffff00' } />
Not entirely sure why this isn't working. I'm trying to hide a col is the value of driveThru is false OR equals to 'N'.
ng-if="location.driveThru === false || location.driveThru === 'N'"
However the === false isn't working and I cant determine why.
if its a boolean change as ,
"!location.driveThru' || location.driveThru === 'N'
and === with string enclosed in quotes if its a string a follows,
ng-if="location.driveThru === 'false' || location.driveThru === 'N'"
What's wrong with this code?
{
"disableDiscount_3": !isEmpty(data.discounts) ? (data.discounts.map(obj => obj.days === 3 && obj.is_enable === true ? true : false) : '',
"disableDiscount_5": !isEmpty(data.discounts) ? (data.discounts.map(obj => obj.days === 5 && obj.is_enable === true ? true : false) : '',
}
Can't I nest tertiary operator within tertiary operator?
Remove ( before data.discounts.map() and trailing comma following last value set at object.
obj.days === 3 && obj.is_enable === true ? true : false is equivalent to obj.days === 3 && obj.is_enable
{
"disableDiscount_3": !isEmpty(data.discounts)
? data.discounts.map(obj => obj.days === 3 && obj.is_enable)
: "",
"disableDiscount_5": !isEmpty(data.discounts)
? data.discounts.map(obj => obj.days === 5 && obj.is_enable)
: ""
}
I want to change the colors of my cell, so in my table i do this on my td
data-ng-class="{selected.id == price.id && !price.isMinPrice ? 'selected' : '', selected.id == price.id && price.isMinPrice ? 'minSelected' : ''}"
i have this error:
Error: [$parse:syntax] Syntax Error: Token '.' is unexpected,
expecting [:] at column 10 of the expression [{selected.id == price.id
&& !price.isMinPrice ? 'selected' : '', selected.id == price.id &&
price.isMinPrice ? 'minSelected' : ''}] starting at [.id == price.id
&& !price.isMinPrice ? 'selected' : '', selected.id == price.id &&
price.isMinPrice ? 'minSelected' : ''}].
What is wrong ..?
You are using ng-class all wrong and that is why you are getting syntax errors.
You need to give it an object literal:
data-ng-class="{selected: selected.id == price.id && !price.isMinPrice,
minSelected: selected.id == price.id && price.isMinPrice}"
This is also much cleaner than what you were trying to do.
I think that ng-class expects structure like this: {'class-name' : booleanValue}, and if value is true, class will be applied.
So in your case:
data-ng-class="{'selected' : selected.id == price.id && !price.isMinPrice, 'minSelected' : selected.id == price.id && price.isMinPrice}"
and if you want to use ternaty operator, you can use class attribute with {{}}:
class="{{selected.id == price.id && !price.isMinPrice ? 'selected' : ''}}"
Im working on a complex app where I need to disable a link if the ID sent from backend meets a certain criteria.
I'm using this now but not sure if it is correct:
ng-show="parentheaderData.casid === '807' || '806' || '808' ?false:true"
Does this look right?
Why don't you move this logic to a controller so you have
html :
ng-show="showParentheader(parentheaderData.casid)"
controller:
$scope.showParentheader = function(id) {
return ! (id === '807' || id ==='806' || id ==='808');
}
Thanks for all the support. The correct solution was:
ng-hide="parentheaderData.casid == '806' || parentheaderData.casid == '807' || parentheaderData.casid == '808'"
you can do like this:
ng-show="(parentheaderData.casid === '807' || parentheaderData.casid ==='806' parentheaderData.casid === || '808') ? false : true"
or:
ng-show=" !(parentheaderData.casid === '807' || parentheaderData.casid ==='806' parentheaderData.casid === || '808')"
ng-show="(parentheaderData.casid === '807' || parentheaderData.casid ==='806' parentheaderData.casid === || '808') ? false : true"