React js adding regular script to react component

Question

I am new to posting questions to stackoverflow. I have a question about React js. Trying to add an old html page with a script I made.

When I take off the comment from the import it breaks the app. Any way to fix this? Leaving the script commented lets the page load with the css but nothing else.

Here is the code in the component

import './style.css';
// import './script.js';
import { NavBar } from "../Nav";


export function CountDownTimer() {
    
    return (
        <>
        <NavBar />

    <h1>Countdown</h1>
    <h2>Default set to new years 2050</h2>

    

    <div className='calendar'>
        <input type='date' id='Date' />
        <button onclick="changeDate()">Countdown</button>
    </div>
    

    <div className='timer-container' >
        <div>
            <div id='days'></div>
            <span>days</span>
        </div>
        <div>
            <div id='hours'></div>
            <span>hours</span>
        </div>
        <div>
            <div id='minutes'></div>
            <span>minutes</span>
        </div>
        <div>
            <div id='seconds'></div>
            <span>seconds</span>
        </div>
    </div>


    <div className='timer-container' >
        <div>
            <div id='thours'></div>
            <span>Total hours</span>
        </div>
        <div>
            <div id='tminutes'></div>
            <span>Total minutes</span>
        </div>
        <div>
            <div id='tseconds'></div>
            <span>Total seconds</span>
        </div>
    </div>

    

    {/* <script src="script.js"></script> */}

    </>
    );
}

and the script.js

//target date to countdown to
var setDate = new Date('2050-01-01T00:00:00');
console.log('Date set to: ' + setDate);




var currentDate;
function countdown() {
    currentDate = new Date();


    var time = (setDate.getTime() - currentDate.getTime());
    var seconds = Math.floor(time/1000)%60;
    var minutes = Math.floor(time/60/1000 % 60);
    var hours = Math.floor(time/1000/3600 % 24);
    var days = Math.floor(time/3600/24/1000);

    

    // console.log('days, hours, minutes, seconds', days, hours, minutes, seconds);
    document.getElementById("days").innerHTML = days;
    document.getElementById("hours").innerHTML = hours;
    document.getElementById("minutes").innerHTML = minutes;
    document.getElementById("seconds").innerHTML = seconds;

    var totalSeconds = Math.floor(time/1000);
    var totalMinutes = Math.floor(time/60/1000);
    var totalHours = Math.floor(time/1000/3600);

    document.getElementById("tseconds").innerHTML = totalSeconds;
    document.getElementById("tminutes").innerHTML = totalMinutes;
    document.getElementById("thours").innerHTML = totalHours;
}

function changeDate() {
    var newDate = document.getElementById("Date").value;
    console.log("newDate: ", newDate);
    setDate = new Date(newDate+"T00:00:00");
}

countdown();



setInterval(countdown, 1000);

Answer 1

React works with modules so you will have to export the functions you want to use from your script and import them in your component.

In script.js add

...
export function countdown() {
...
export function changeDate() {
...

And in your component add

import { countdown, changeDate } from './script.js';

export function CountDownTimer() {
    // Execute countdown when your component gets rendered
    // Absolutely not the best way to implement an interval in React
    // but added more for demonstration purposes
    countdown();
    setInterval(countdown, 1000);
...

And in your render function you would have to call the function in jsx style

<button onClick={changeDate}>Countdown</button>

You will have to migrate your existing code in order to fit React's design pattern.