Can somebody help me? Can't find problem in React

Question

I am trying to make a countdown clock in my mobile view. But I can't seem to make the numbers work, my wrapper doesn't connects. Hope somebody can see what I should do. I'm pretty new to Javascript and it all.

Code:

import React, { Component, Fragment, useState } from "react";

const MobileView = () => {
  class wrapper extends Component {
    constructor() {
      super();
      this.state = {};
    }

    componentDidMount() {
      this.startInterval();
    }

    startInterval = () => {
      const second = 1000;
      const minute = second * 60;
      const hour = minute * 60;
      const day = hour * 24;

      let x = setInterval(function () {
        document.getElementById("days").innerText = "00";
      }, second);
    };
  }
  return (
    <div className="wrapper">
      <header className="Appheader">
        <h1 id="head">Countdown</h1>
      </header>

      <div id="list">
        <ul>
          <li>
            <span id="days"></span>Days
          </li>
          <li>
            <span id="hours"></span>Hours
          </li>
          <li>
            <span></span>Mins
          </li>
          <li>
            <span></span>Seconds
          </li>
        </ul>
      </div>
    </div>
  );
};

export default MobileView;

Answer 1

You seem to be mixing some concept:

• You are are creating a class component, that you do not use, inside a functional component
• You are trying to update the DOM directly instead of using the state

Here are the step you need to follow to make it work:

• Choose between a class and a functional component
• Setup your state accordingly
• Start an interval that will update the state every X second
• Clear the interval when the component is unmounted
• Use your state value in the render function

Here is an working counter using a functional component, I will let you implement the logic for days, hours and minutes.

import React, { useEffect, useState } from "react";

// 1. Choose between a class and a functional component 
export const MobileView = () => {
  // 2. Setup your state accordingly
  const [secondsElapsed, setSecondsElapsed] = useState(0);

  const timer = () => {
    setSecondsElapsed(secondsElapsed + 1);
  };

  useEffect(() => {
    // 3. Start an interval that will update the state every X second
    const interval = setInterval(timer, 1000);

    // 4. Clear the interval when the component is unmounted
    return () => clearInterval(interval);
  });

  return (
    <div className="wrapper">
      <header className="Appheader">
        <h1 id="head">Countdown</h1>
      </header>

      <div id="list">
        <ul>
          <li>
            <span></span>
            {secondsElapsed} // 5. Use your state value in the render function
          </li>
        </ul>
      </div>
    </div>
  );
};

Answer 2

also, I recommend to add useCallback and dependencies to the useEffect

 const timer = useCallback(() => {
    setSecondsElapsed(secondsElapsed => secondsElapsed + 1);
  }, []);

  useEffect(() => {
    // 3. Start an interval that will update the state every X second
    const interval = setInterval(timer, 1000);

    // 4. Clear the interval when the component is unmounted
    return () => clearInterval(interval);
  }, [timer]);