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.
Related
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);
}
});
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
I have the following conditional
if (
!user.userId
&& match.path === '/login'
) {
component = <Login/>
} else if (
user.userId
&& !user.OTPVerified
&& !user.loginWithPassword
&& match.path === '/verify'
) {
component = <VerifyOTP/>
} else if (
(user.userId && user.OTPVerified) || (user.userId && user.loginWithPassword)
&& !user.profileCompleted
&& match.path === '/complete-profile'
) {
console.log('userid', user.userId)
console.log('otpverified', user.OTPVerified)
console.log('loginWithPassword', user.loginWithPassword)
console.log('profileCompleted', user.profileCompleted)
console.log('path', match.path)
component = <CompleteProfile/>
} else if (
user.userId
&& !user.OTPVerified
&& user.loginWithPassword
&& user.profileCompleted
&& match.path === '/login-password'
) {
component = <LoginWithPassword/>
} else {
component = <Login/>
}
console returns
userid 29
otpverified true
loginWithPassword false
profileCompleted true
path /login
I dont get why am i still seeing CompleteProfile component
Add some parenthesis around those two expressions with the || between them if they should be evaluated together.
((user.userId && user.OTPVerified) || (user.userId && user.loginWithPassword))
This change makes your Login component show based on the values.
You can remove the inner ones too and the && will be evaluated first.
(user.userId && user.OTPVerified || user.userId && user.loginWithPassword)
else if (
(user.userId && user.OTPVerified || user.userId && user.loginWithPassword)
&& !user.profileCompleted
&& match.path === '/complete-profile'
)
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#Operator_precedence
console.log((true && true) || (true && false) && false && false) //true
console.log((true && true || true && false) && false && false) // false
I have a react table that I am trying to filter on multiple columns using a filter function. If i filter on one column its fine but if i add another column it filters only by that and not both.
Example would be the name "Scott". I want to filter the first_name column by it and also the biz_name column by it. But when I check the box to change state for that column, it only filters on one. Here is the checkbox in which I have checked state to make sure it is working correctly.
<Checkbox
label="Business Name"
onCheck={event => {
if (event.target.checked) {
this.setState({
filterBusinessName: true
});
} else {
this.setState({
filterBusinessName: false
});
}
}}
/>
<Checkbox
label="First Name"
onCheck={event => {
if (event.target.checked) {
this.setState({
filterFirstName: true
});
} else {
this.setState({
filterFirstName: false
});
}
}}
/>
And then here is the filter function above the table:
let items = this.state.contacts
if (this.state.term && items.length > 0) {
let searchTerm = this.state.term.toLowerCase()
items = items.filter(row => {
if(this.state.filterBusinessName && row.biz_name){
return row.biz_name.toLowerCase().includes(searchTerm)
}
if(this.state.filterFirstName && row.first_name){
return row.first_name.toLowerCase().includes(searchTerm)
}
if(this.state.filterFirstName && row.first_name && this.state.filterBusinessName && row.biz_name){
return row.first_name.toLowerCase() == searchTerm || row.biz_name.toLowerCase() == searchTerm
}
})
}
I think you want something like this
let items = this.state.contacts;
if (this.state.term && items.length > 0) {
let searchTerm = this.state.term.toLowerCase();
items = items.filter(row => {
if (
this.state.filterBusinessName &&
row.biz_name &&
row.biz_name.toLowerCase().includes(searchTerm)
) {
return true;
}
if (
this.state.filterFirstName &&
row.first_name &&
row.first_name.toLowerCase().includes(searchTerm)
) {
return true;
}
return (
this.state.filterFirstName &&
row.first_name &&
this.state.filterBusinessName &&
row.biz_name &&
(row.first_name.toLowerCase() == searchTerm ||
row.biz_name.toLowerCase() == searchTerm)
);
});
}
The main difference here is that the function will only return false if it doesn't match any. Before it returned false immediately if it didn't match one of the filter checks.
There's definitely some optimisation you can do to make this more comprehensible. But it illustrates the idea. Hope that helps
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)
: ""
}