Is there a way of calling an html element before it is defined?

Question

I am making a countdown timer in React.js by following a youtube tutorial.


function maintenance() {
    const countdown = () => {
        const countDate = new Date("August 10, 2021 00:00:00").getTime();
        const now = new Date().getTime();
        const gap = countDate - now;
    
        // Introducing Time variables
        const second = 1000;
        const minute = second * 60;
        const hour = minute * 60;
        const day = hour * 24;
    
        //Calculate shift
    
        const textDay = Math.floor(gap / day);
        const textHour = Math.floor((gap % day) / hour );
        const textMinute = Math.floor((gap % hour) / minute);
        const textSecond = Math.floor((gap % minute) / second );
    
        document.querySelector('.day').innerText = textDay;
        document.querySelector('.hour').innerText = textHour;
        document.querySelector('.minute').innerText = textMinute;
        document.querySelector(".second").innerText = textSecond;
    };
    

    countdown();

    return (
        <section className="coming-soon">
            <div>
            <h1>A nossa equipa está a trabalhar para voltar a por o site no ar</h1>
            <div className="countdown">
                <div className="container-day">
                    <h3 className="day">Time</h3>
                    <h3>Dias</h3>
                </div>

                <div className="container-hour">
                    <h3 className="hour">Time</h3>
                    <h3>Horas</h3>
                </div>

                <div className="container-minute">
                    <h3 className="minute">Time</h3>
                    <h3>Minutos</h3>
                </div>

                <div className="container-seconds">
                    <h3 className="second">Time</h3>
                    <h3>Segundos</h3>
                </div>

            </div>
            
            </div>
            <img className="waiting" src="https://res.cloudinary.com/dnho57ne8/image/upload/v1628004034/3685835_sp5t6h.svg" alt=""/>
            

        </section>
    )
}

export default maintenance;

I am getting a Type Error on the 'innetText' because it says I cannot set property of null.

Now, from my research, I understood that I am calling the HTML components before they are initiated.

What should I do? I have tried moving the function to after the return, but it didn't work.

Any guesses?

You're essentially going about this the wrong way. The countdown functionality you're trying to use is not meant for React. In React you would (almost) *never* try to make direct references to DOM elements. Instead, track the current value of the countdown in React state. Render whatever value is in the state. Then update that state however you like. For example, by having a `useEffect` which invokes a `setInterval` which periodically updates the countdown value in state. — David, Aug 03 '21 at 18:23
Oh ok. Thank you David. I have seen this tutorial as a vanilla JS example, so I am guessing that the problem is right there. I will try to do this on a different way. THank you — Tomas Mota, Aug 03 '21 at 18:25
This is a step by step guide that could help https://www.digitalocean.com/community/tutorials/react-countdown-timer-react-hooks — Wael Zoaiter, Aug 03 '21 at 18:28

Is there a way of calling an html element before it is defined?

0 Answers0