React Typescript Date Time Component (TypeError: Date is not a constructor)

Question

I'm trying to create a React component using typescript. But showing some TypeError. I'm using Nextjs and Typescript. Actually, I wanted to show the Time and Date both. But when I use new Date() Function Then Shows an error massage that calls

const Date: () => JSX.Element
'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.

Here is my code

import React, { FC, ReactNode, useEffect, useState } from 'react'
import banner from "../assets/banner.png"
import Image from 'next/image'

const Date = (): JSX.Element => {
    const dateTime = new Date();
    const [clock, setClock] = useState<string>(dateTime.toLocaleDateString());
    

    useEffect(() => {
        const clock = setInterval(
            (): void => setClock(dateTime.toLocaleTimeString()),
            1000
        );

        return () => {
            clearInterval(clock);
        };
    }, []);

    return (
        <div className='w-full relative mb-3'>
            <Image
                className='rounded-xl w-full mx-auto'
                src={banner}
                alt="banner"
                width={700}
                height={240}
            />
            <div className='absolute rounded-xl w-full flex items-center h-full p-4 top-0 left-0'>
                <div className='ml-0 sm:ml-3'>
                    <h1 className='text-3xl md:text-4xl lg:text-6xl text-white font-bold'>
                        {new Date().toLocaleDateString(undefined, {
                            weekday: "long",
                            year: "numeric",
                            month: "long",
                            day: "numeric",
                        })}
                    </h1>
                    <p className='sm:text-xl mt-3 text-white font-bold'>{clock}</p>
                </div>
            </div>
        </div>
    )
}

export default Date

Charchit Kapoor · Accepted Answer · 2022-07-24 07:54:58Z

3

Your component is named Date. So when you try const dateTime = new Date();, JS tries to invoke the constructor for your component, due to which you get the error, because it shadows the Date class from JS. Rename your component to something else, so that you can use the Date class from JS.

answered Jul 24, 2022 at 7:54

Charchit Kapoor

9,3242 gold badges11 silver badges26 bronze badges

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

2 Comments

Md Habibur Rahman Over a year ago

Thank You, It's Working but My Time is showing 24 Formate. Can you please tell me where the problem is?

Charchit Kapoor Over a year ago

Can you add what is the exact value getting displayed and what is expected?

Hoàng Trung Nam · Accepted Answer · 2022-07-25 01:39:26Z

0

This error occur because you are redefine Date constructor of javascript and when you call const dateTime = new Date() the compiler will think that you are using "Date function" you define above. Try again with a new function name:

const myDate: () => JSX.Element

answered Jul 25, 2022 at 1:39

Hoàng Trung Nam

538 bronze badges

Collectives™ on Stack Overflow

React Typescript Date Time Component (TypeError: Date is not a constructor)

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related