Resolved: How to use input from user to countdown?

Question:

I’m making a countdown and I want that the user can say to which date the countdown should go. I already created an input from the user and I guess I should change the const difference to use the date from the input but I don’t know how I could do that.

import React, {useEffect, useState} from "react";
import './styles.css';

function OwnInput() {
    const calculateTimeLeft = () => {
        let year = new Date().getFullYear();
    
        const difference = +new Date(`01/01/${year+1}`) - +new Date();
        
        let timeLeft = {};
    
        if (difference > 0) {
          timeLeft = {
            days: Math.floor(difference / (1000 * 60 * 60 * 24)),
            hours: Math.floor((difference / (1000 * 60 * 60)) % 24), 
            minutes: Math.floor((difference / 1000 / 60) % 60),
            seconds: Math.floor((difference / 1000) % 60)
          };
        }
    
        return timeLeft
      };
        
        const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
        const [year] = useState(new Date().getFullYear());
    
        useEffect(() => {
          const timer = setTimeout(() => {
            setTimeLeft(calculateTimeLeft());
          }, 1000);
          return () => clearTimeout(timer);
        });
        const timerComponents = [];
    
      Object.keys(timeLeft).forEach((interval) => {
        if (!timeLeft[interval]) {
          return;
      }
    
      timerComponents.push(
        <span>
          {timeLeft[interval]} {interval}{" "}
        </span>
      );
      });
      return (
        <div className="nieuwjaar">
          <h1>Own Date</h1>
          <input type="date" ></input>
          <br></br>
          {timerComponents.length ? timerComponents : <span>Time's Up!</span>}
        </div>
      );
}

export default OwnInput;

Answer:

As I mentioned on my comment, every input has a onChange prop in which you can get updates when the value changes.
So you can create a new state variable that will hold the target date, and call its setter when that event happens:

function getInitialDate() {
  const year = new Date().getFullYear();

  return new Date(`01/01/${year + 1}`) 
}

function OwnInput() {
  const [date, setDate] = useState(getInitialDate())

  const calculateTimeLeft = () => {
    const difference = +date - +new Date();

    let timeLeft = {};

    if (difference > 0) {
      timeLeft = {
        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
        minutes: Math.floor((difference / 1000 / 60) % 60),
        seconds: Math.floor((difference / 1000) % 60),
      };
    }

    return timeLeft;
  };

  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());

  useEffect(() => {
    const timer = setTimeout(() => {
      setTimeLeft(calculateTimeLeft());
    }, 1000);
    return () => clearTimeout(timer);
  });
  const timerComponents = [];

  Object.keys(timeLeft).forEach((interval) => {
    if (!timeLeft[interval]) {
      return;
    }

    timerComponents.push(
      <span>
        {timeLeft[interval]} {interval}{" "}
      </span>
    );
  });

  return (
    <div className="nieuwjaar">
      <h1>Own Date</h1>
      <input type="date" value={formatDate(date)} onChange={evt => setDate(new Date(evt.target.value))}></input>
      <br></br>
      {timerComponents.length ? timerComponents : <span>Time's Up!</span>}
    </div>
  );
}

function formatDate(date) {
  // Formats to yyyy-mm-dd
  return date.getFullYear() + "-" + String(date.getMonth()+1).padStart(2, "0") + "-" + String(date.getDate()).padStart(2, "0")
}

I think this should work. A few things worthy of note:

value={formatDate(date)} on the input is not always needed, but on yours it is, because you want to show the initial date which is a specific one – Check for “Controlled vs uncontrolled components”
I had to format the date into a yyyy-mm-dd string because it’s what the input type="date" requires for its value. But your state is of type Date, we just format it when we’re about to pass it to the input.
There’s a different way of handling this altogether. timeLeft is in essence a derived state of date, but you need to rerender the component every second. You could then avoid having a state for timeLeft, and just calculate it whenever the component renders. And have something that forces a rerender every second. It’s a bit more advanced and there are devs that don’t really like this method, so don’t worry too much about it.

Hope that helps!

If you have better answer, please add a comment about this, thank you!

Resolved: How to use input from user to countdown?

Resolved: How to get Union type from an array of objects in Flow?

Resolved: Modify entity using Action in C#

Resolved: How to give rank on datetime column group by another column with userid in it

Leave A Reply