How to use javascript/jquery in Reactjs

Question

I am working in Reactjs and i am using nextjs framework,Right now i am trying to use following code in index.js so i can display data (day month day etc),How can i do this ? Here is my code

<script>
function updateTimer() {
  future  = Date.parse("June 11, 2020 11:30:00");
  now     = new Date();
  diff    = future - now;

  days  = Math.floor( diff / (1000*60*60*24) );
  hours = Math.floor( diff / (1000*60*60) );
  mins  = Math.floor( diff / (1000*60) );
  secs  = Math.floor( diff / 1000 );

  d = days;
  h = hours - days  * 24;
  m = mins  - hours * 60;
  s = secs  - mins  * 60;
  document.getElementById("timer")
    .innerHTML =
      '<div>' + d + '<span>days</span></div>' +
      '<div>' + h + '<span>hours</span></div>' +
      '<div>' + m + '<span>minutes</span></div>' +
      '<div>' + s + '<span>seconds</span></div>' ;
}
setInterval('updateTimer()', 1000 );

</script>
<div id="timer"></div>

it's not recommended to directly manipulate dom in react/next. go in the react way and use state, that's easier. — abolfazl shamsollahi
– abolfazl shamsollahi, Commented Nov 9, 2022 at 10:57
usually we don't use document.getElementById("timer").innerHTML type of code in react it is called directly manipulating the dom , instead we use state to change the dom when the specific value is changed. — abolfazl shamsollahi
– abolfazl shamsollahi, Commented Nov 9, 2022 at 11:07

Jack Ecuyer · Accepted Answer · 2022-11-09 12:50:59Z

2

Directly manipulating the DOM in React is not recommended. Instead you should create a React component which holds state to display the data you would like to display. Here's an example of a component that can display the data you parse into it.

const Timer = ({days, hours, mins, secs}) => {
    const h = useMemo(() => {return hours - days * 24;}, [hours, days]);
    const m = useMemo(() => {return mins - hours * 60;}, [mins, hours]);
    const s = useMemo(() => {return secs - mins  * 60;}, [secs, mins]);
    
    return (
        <>
            <div>{days}</div>
            <div>{h}</div>
            <div>{m}</div>
            <div>{s}</div>
        </>
    )
}

Now this <Timer> component can be rendered in a component which holds the state for the days, hours, minutes and seconds, with a useEffect() being triggered every second to update the countdown.

const Countdown = ({futureDate}) => {
    const [future, setFuture] = useState(futureDate);
    const [days, setDays] = useState(0);
    const [hours, setHours] = useState(0);
    const [mins, setMins] = useState(0);
    const [secs, setSecs] = useState(0);

    useEffect(() => {
        const timer = setInterval(() => {
            //runs every second to update data's state
            const now = new Date();
            const diff = future - now;
            setDays(Math.floor( diff / (1000*60*60*24) ));
            setHours(Math.floor( diff / (1000*60*60) ));
            setMins(Math.floor( diff / (1000*60) ));
            setSecs(Math.floor( diff / 1000 ));
        }, 1000);
        return () => clearInterval(timer);
    }, []);
    
    return (
        <>
            <Timer days={days} hours={hours} mins={mins} secs={secs}/>
        </>
    )
}

If you need more help understanding hooks in React, I suggest you take a look at https://reactjs.org/docs/hooks-reference.html

edited Nov 9, 2022 at 12:50

answered Nov 9, 2022 at 11:39

Jack Ecuyer

1651 silver badge13 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

coder Over a year ago

kindly update your code for component ( braces not closing properly ), giving me error

Jack Ecuyer Over a year ago

@coder Fixed. I forgot to close Countdown component function.

coder Over a year ago

i am getting following error now "Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports "

coder Over a year ago

sorry but your code is not working for me

Jack Ecuyer Over a year ago

@coder The code is a proof of concept and demonstration of how you can use hooks in React to display data to the DOM. It requires you to specify the date you want to calculate for the count as a prop to the <Countdown> component so this will not work as a simple copy-paste. I suggest you read the react documentation or watch some tutorials to improve your understanding of the framework. reactjs.org/docs/getting-started.html

|

Collectives™ on Stack Overflow

How to use javascript/jquery in Reactjs

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related