React CountDown component

Vahid Afshari — Wed, 26 Jul 2023 12:58:31 +0000

I just created a custom React countDown component and will share you my experience. In order to have a react countdown component that displays the remaining days, hours, and minutes, You'll need to set the target date for the countdown, and the component will calculate the time remaining and update it in real-time.

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

const Countdown = ({ targetDate }) => {
  const calculateTimeRemaining = () => {
    const now = new Date().getTime();
    const target = new Date(targetDate).getTime();
    const timeRemaining = target - now;

    const days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
    const hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));

    return { days, hours, minutes };
  };

  const [timeRemaining, setTimeRemaining] = useState(calculateTimeRemaining());

  useEffect(() => {
    const interval = setInterval(() => {
      setTimeRemaining(calculateTimeRemaining());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      {timeRemaining.days} days, {timeRemaining.hours} hours, {timeRemaining.minutes} minutes remaining
    </div>
  );
};

export default Countdown;

In this component, I calculate the remaining days, hours, and minutes (adding seconds is easy) between the current time and the target date using the calculateTimeRemaining function. The setInterval inside the useEffect is used to update the time remaining every second (1000ms). The countdown will automatically update as time passes.

To actually use this countdown component in your app, simply import and include it, passing the target date as a prop:


import React from 'react';
import Countdown from './Countdown';

const App = () => {
  const targetDate = new Date('2023-12-31T23:59:59'); // Replace this with your target date

  return (
    <div>
      <h1>Countdown Timer</h1>
      <Countdown targetDate={targetDate} />
    </div>
  );
};

export default App;

Please replace the targetDate value with your desired date in the format YYYY-MM-DDTHH:mm:ss.

How to collect multi-field data in React via form

Vahid Afshari — Tue, 26 Jul 2022 15:06:00 +0000

If you want to collect user data through a form from Front with React js, you may face to the this issue, How to store data in react and then send it to whatever, like your express abckend server.

The first solution is to use useState() hook. It's not perfect but may help you in variues situations. But if you want to take several fields like name, email, birth date and so on, are you creating multi state?

So, simply don't do that. the better solution is to use single hook to take user data as an object in react.

How?

look at this code:

  const [userAuth, setUserAuth] = useState({
    email: '',
    password: '',
  });

this would help you to store everything. no matter you want to get 2 inputs or 10, you only need a single useState().

then you may ask you how to hanle input?
you need a block of code like this. this function will handle your inputs and recognise them by their name and set the value.

  const handleInput = (e) => {
    const { name, value } = e.target;
    setUserAuth({
      ...userAuth,
      [name]: value,
    });
  };

the only left thing is to assign handleInput to the input as a onchange event like this:
<Input type="email name="email" onChange={handleInput}/> <Input type="text name="name" onChange={handleInput}/>

that's it. You then have an object will all user data

DEV Community: Vahid Afshari

React CountDown component

How to collect multi-field data in React via form

How?