i have a problem with comparison operator, in my forum i want to show an element if the number of post is <= 10, <=50 and so on....but if <=50 is displayed i want to hide <=10.
My code:
if (userPosts <= 10){
vnode.children.push(
<span className="auto-badge"><i class="fas fa-baby autopost"/> less than 10 posts</span>
);
}
if (userPosts <= 50){
vnode.children.push(
<span className="auto-badge"><i class="fas fa-child autopost"/> less than 50 posts</span>
);
}
if (userPosts <= 100){
vnode.children.push(
<span className="auto-badge"><i class="fas fa-bullhorn autopost"/> less than 100 posts</span>
);
}
the problem is that if a user have 200 posts, i see all of these 3 elements displayed, and i want to display only <=100 instead.
you can make a double condition in your if statement :
if (userPosts <= 10){
vnode.children.push(
<span className="auto-badge"><i class="fas fa-baby autopost"/> less than 10 posts</span>
);
}
if (userPosts <= 50 && userPosts > 10){
vnode.children.push(
<span className="auto-badge"><i class="fas fa-child autopost"/> less than 50 posts</span>
);
}
if (userPosts <= 100 && userPosts > 50){
vnode.children.push(
<span className="auto-badge"><i class="fas fa-bullhorn autopost"/> less than 100 posts</span>
);
}
EDIT or use else if statement :
if (userPosts <= 10){
vnode.children.push(
<span className="auto-badge"><i class="fas fa-baby autopost"/> less than 10 posts</span>
);
}
else if (userPosts <= 50){
vnode.children.push(
<span className="auto-badge"><i class="fas fa-child autopost"/> less than 50 posts</span>
);
}
else if (userPosts <= 100){
vnode.children.push(
<span className="auto-badge"><i class="fas fa-bullhorn autopost"/> less than 100 posts</span>
);
}
You can use an else-if block as:
if (userPosts <= 10){
vnode.children.push(
<span className="auto-badge"><i class="fas fa-baby autopost"/> less than 10 posts</span>
);
}
else if (userPosts <= 50){
vnode.children.push(
<span className="auto-badge"><i class="fas fa-child autopost"/> less than 50 posts</span>
);
}
else if (userPosts <= 100){
vnode.children.push(
<span className="auto-badge"><i class="fas fa-bullhorn autopost"/> less than 100 posts</span>
);
}