I have if else condition , I know which one is true and must work when page is rendering but the false one works for very short time. How can i stop this. I always see "Auction is over" and then the view changes but shouldn't I ever see this at all in the beginning? How does the wrong condition work and appear on the screen?
const [days, hours, minutes, seconds] = useCountdown(endDate);
const isFinished = (days + hours + minutes + seconds <=0);
let showTime = "";
let html = "";
if (pendingApiCall) {
html = <Spinner />
} else {
if (!isFinished) {
showTime = `${days} days ${hours} hours ${minutes} minutes ${seconds} seconds`;
html = (<>
<span className="text-danger">{showTime}</span>
{isLoggedIn && (!isOwner && (<div className="action my-2">
<Input label='Enter your bid' name='bid' id='price' type="text" onChange={onChangePrice} error={bidError || samePriceError } />
<ButtonWithProgress className="add-to-cart btn btn-default" pendingApiCall={bidPendingApiCall || pendingApiCall}
text='bid on product' onClick={() => setModalVisible(true)} disabled={bidError || (price == null)} /></div>))
}
{!isLoggedIn && <Link to="/login" className="action my-2">Login to bid</Link>}
</>
)
} else {
html = (<span className="text-danger">"Auction is over"</span>);
}
}
The problem is isFinished, its value never change after the first assignation. It is possible init this with true.
You could create this as a state and modify it in a useEffect which dependencies are only days, hours, minutes. Avoiding type seconds to not render every second, but is not totally necessary.
When minute is less than 1 days, hours is equal to 0, a setTimeout to call a function which toogle isFinished in 59 s, or another creative solution.
const [isFinished, setIsFInished] = useState(true)
useEffect( () =>{
if(days === 0 && hours === 0 && minutes > 1)
// setTimeOut to call a function
else
return;
},[days, hours, minutes]) // You can add the rest of them
That's my idea. But, maybe some other better approach can exist.