nested tertiary operator failed in javascript - reactjs

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)
: ""
}

Related

I have a page where I can add comment. Now, I need that comment to be displayed in header without refreshing when I click the checkbox

onChange={()=>{
asksFor === "Beneficiary" ? (comment.beneficiaryId = selectedBeneficiaryDetail?.beneficiaryId)
: (comment.donorId = selectedDonorDetail?.donorId)
displayInHeader(comment);
}}
And:
toast.info("Comment is " + (comments.displayInHeader === true ? " enabled successfully for displaying in header.": "Disabled."));
What I've tried:
toast.info("Comment is " + (comments.displayInHeader === true ? " enabled successfully for displaying in header.": "Disabled."));
if( comments.displayInHeader === true && this.selectedBeneficiaryDetail && commentDetail.beneficiaryId !== undefined )
{ this.selectedBeneficiaryDetail.displayCommentInHeader = commentDetail.comments;
console.log(this.selectedBeneficiaryDetail.displayCommentInHeader);
}
else if( comments.displayInHeader === true && this.rootStore.donorStore.selectedDonorDetail && commentDetail.donorId !== undefined)
{
this.rootStore.donorStore.selectedDonorDetail.displayCommentInHeader = commentDetail.comments;
console.log (this.rootStore.donorStore.selectedDonorDetail.displayCommentInHeader);
}
});

React filter product by gender, category, etc eCommerce WebSite

const [filterSettings, setFilterSettings] = useState({
order: "", // HIGH or LOW and default empty
price: [0, 5000],
gender: "", // female or male and default empty
size: [], // default empty
color: [], // default empty
category: [], // default empty
});
i try like this and don t work..
let filteredNumbers = state.product.products.filter(function (x) {
return x.visible &&
x.price >= filterSettings.price[0] &&
x.price <= filterSettings.price[1] &&
x.category.includes(filterSettings.category) &&
filterSettings.gender
? x.product_gender === filterSettings.gender.toLocaleLowerCase()
: x;
});
I really don't know how I can make it work and when it's an empty category and when it's used
I think product still show when one or many filterSetting option empty is better,
Try this:
let filteredNumbers = state.product.products.filter(function (x) {
return x.visible &&
x.price >= filterSettings.price[0] &&
x.price <= filterSettings.price[1] &&
(x.category.includes(filterSettings.category) || (filterSettings.category === []))&&
(filterSettings.gender
? x.product_gender === filterSettings.gender.toLocaleLowerCase()
: true);
});
try this out
return x.visible &&
x.price >= filterSettings.price[0] &&
x.price <= filterSettings.price[1] &&
x.category.includes(filterSettings.category) &&
(filterSettings.gender ? x.product_gender === filterSettings.gender.toLocaleLowerCase(): false) ? x : null

value is always empty inside ternary operator statement

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

How to update state of an array in reactjs

I have this array of visibility of my buttons. I am saving state of those buttons in a state.
this.state = {
score: 0,
status: "",
userSelected: "",
computerSelected: "",
visibility: [true, true, true]
};
I want to update value of visibility array index wise. I tried to do like below but it doesn't update, it keep adding new elements in an array instead of update value of an array.
var arrayvar = this.state.visibility.slice();
if (
(user === "Rock" && computer === "Paper") ||
(user === "Paper" && computer === "Rock")
) {
arrayvar.push(true, true, false); // here set 1st and 2nd to true and 3rd to false
} else if (
(user === "Rock" && computer === "Scissors") ||
(user === "Scissors" || computer === "Rock")
) {
arrayvar.push(true, false, true);
} else if (
(user === "Paper" && computer === "Scissors") ||
(user === "Scissors" || computer === "Paper")
) {
arrayvar.push(false, true, true);
} else if (user === "Rock" && computer === "Rock") {
arrayvar.push(true, false, false);
} else if (user === "Paper" && computer === "Paper") {
arrayvar.push(false, true, false);
} else if (user === "Scissors" && computer === "Scissors") {
arrayvar.push(false, false, true);
}
this.setState({ visibility: arrayvar });
Can anyone suggest how to do this in reactjs ?
array.push will always push the new values in array, it will not update the existing values.
You need to write it like this:
arrayvar = []; //create a variable, don't need to copy the state values here
arrayvar = [true, true, false]; // assign new array inside conditions
this.setState({
visibility: arrayvar //then update the state visibility array
})
You don't need to create a copy of state array because, you are updating the whole array not the specific value of the array, simply create a variable:
arrayvar = [];
Full code:
var arrayvar = [];
if ( (user === "Rock" && computer === "Paper") || (user === "Paper" && computer === "Rock")) {
arrayvar = [true, true, false];
} else if ((user === "Rock" && computer === "Scissors") || (user === "Scissors" || computer === "Rock")) {
arrayvar = [true, false, true]
} else if ((user === "Paper" && computer === "Scissors") || (user === "Scissors" || computer === "Paper")) {
arrayvar = [false, true, true];
} else if (user === "Rock" && computer === "Rock") {
arrayvar = [true, false, false];
} else if (user === "Paper" && computer === "Paper") {
arrayvar = [false, true, false];
} else if (user === "Scissors" && computer === "Scissors") {
arrayvar = [false, false, true];
}
this.setState({ visibility: arrayvar });
By the way,
var arrayvar = ["Rock", "Paper", "Scissors"]
.map(
k => computer === k || user === k
);
May well replace the whole if-then cascade you wrote.

Define any conditional in a ternary operator

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' : ''}}"

Resources