How to make js working for component inside component in React?

Question

Hi I want to call some countdown timer in side other component in react but my JS doesn't work. When I put component outside the other ,my JS is working fine. I want it to put it inside the GlowBox component. Like I said when I put it out the GlowBox everything is fine and working perfect.

import React, { Fragment } from 'react';

const Clock = ({ timerMinutes, timerSeconds }) => {
  return (
    <Fragment>
      ...
    </Fragment>
  );
};

Clock.defaultProps = {
  timerMinutes: 3,
  timerSeconds: 0,
};

export default Clock;

!

import React, { useState, useEffect } from 'react';
function App() {
  const [timerMinutes, setTimerMinutes] = useState();
  const [timerSeconds, setTimerSeconds] = useState();

  let interval;

  const startTimer = () => {
    const countDownDate = new Date('May 30,2023 ').getTime();

    interval = setInterval(() => {
      const now = new Date().getTime();

      const distance = countDownDate - now;

      const minutes = Math.floor((distance % (60 * 60 * 1000)) / (1000 * 60));
      const seconds = Math.floor((distance % (60 * 1000)) / 1000);

      if (distance < 0) {
        // Stop Timer

        clearInterval(interval.current);
      } else {
        // Update Timer
        setTimerMinutes(minutes);
        setTimerSeconds(seconds);
      }
    });
  };

  useEffect(() => {
    startTimer();
  });
  return (
    <div>
      <div className='divBut'>
        <NavBar></NavBar>, <NavBar type={'drugi'}></NavBar>,<NavBar></NavBar>
      </div>
      <GlowBox>
        
        <div className='App'>
          <LeftSide timerMinutes={timerMinutes} timerSeconds={timerSeconds} />
        </div>
      </GlowBox>
    </div>
  );
}

export default App;

Answer 1

I think this is because your LeftSide component is inside GlowBox, wich means it can access only props from GlowBox, not state. It is nested.

For the Navbar it can work if you try to access state, because they are not nested in a React component. Try to remove the LeftSide component from Glowbox or open the GlowBox component and put LeftSide inside it (inside its file)