Incorrect use of ternary operator

Question

I want to display a progress bar and its percentages, but only while bar is less than 100% completed.

This is the code I'm using:

return (
    <>
        <h2>{currentAmount}%</h2>
        {currentAmount > maxOrderValue ? <Progress type="steps" steps={["completed"]} /> : <Progress type="line" slim label="hey" percent={currentAmount} />}
        <MinicartMaxValue />
    </>
);

currentAmount is the percentage (value / maxOrderValue), and I'm comparing it with maxOrderValue, to determine if it's passed 100 or not.

And this is how it looks:

I would like to get rid of percentage when it's past 100%.

I've tried to do do this, but didn't succeed:

return (
    <>
        {currentAmount > maxOrderValue ? <Progress type="steps" steps={["completed"]} /> : <h2>{currentAmount}%</h2> && <Progress type="line" slim label="hey" percent={currentAmount} />}
        <MinicartMaxValue />
    </>
);

What am I doing wrong and what would be the proper way to get what I need?

Answer 1

it's a simple mistake

just change > in >=

return (
    <>
        <h2>{currentAmount}%</h2>
        {currentAmount >= maxOrderValue ? <Progress type="steps" steps={["completed"]} /> : <Progress type="line" slim label="hey" percent={currentAmount} />}
        <MinicartMaxValue />
    </>
);