I am using the following code to set up a Luxon clock for my project use.

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

interface IProps {
  timezone: string;
  format: string;
  calendar?: string;
  daysOffset?: number;
}

const LiveDateTime: React.FC<IProps> = ({
  timezone,
  daysOffset,
  format,
  calendar,
}) => {
  const [timeLive, setTimeLive] = useState<DateTime>(DateTime.local());

  useEffect(() => {
    const interval = setInterval(() => {
      setTimeLive(
        DateTime.local()
          .setZone(timezone)
          .reconfigure({ outputCalendar: calendar })
          .plus({ days: daysOffset })
      );
    }, 1000);

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

  return <span>{timeLive?.toFormat(format)}</span>;
}; 
export default LiveDateTime;

Now, I am using this ponent in another place to define the month# of the current date.

const month = <LiveDateTime timezone={place?.timezone} format="M" />; // This returns '12' as a number in the UI (for December)
console.log(month)
getData(month); //this functions is supposed to return some data based on the given month.
//I get an error instead on this line that says, 'Argument of type 'Element' is not assignable to parameter of type 'number'.

When I print this in the console, I get an entire react.element object. I need to be able to use '12' as a number (for December) in getData()for the month variable. How can I covert this object into a number type or string type if necessary? P.S. I tried using pareInt(). doesn't work.

I am using the following code to set up a Luxon clock for my project use.

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

interface IProps {
  timezone: string;
  format: string;
  calendar?: string;
  daysOffset?: number;
}

const LiveDateTime: React.FC<IProps> = ({
  timezone,
  daysOffset,
  format,
  calendar,
}) => {
  const [timeLive, setTimeLive] = useState<DateTime>(DateTime.local());

  useEffect(() => {
    const interval = setInterval(() => {
      setTimeLive(
        DateTime.local()
          .setZone(timezone)
          .reconfigure({ outputCalendar: calendar })
          .plus({ days: daysOffset })
      );
    }, 1000);

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

  return <span>{timeLive?.toFormat(format)}</span>;
}; 
export default LiveDateTime;

Now, I am using this ponent in another place to define the month# of the current date.

const month = <LiveDateTime timezone={place?.timezone} format="M" />; // This returns '12' as a number in the UI (for December)
console.log(month)
getData(month); //this functions is supposed to return some data based on the given month.
//I get an error instead on this line that says, 'Argument of type 'Element' is not assignable to parameter of type 'number'.

When I print this in the console, I get an entire react.element object. I need to be able to use '12' as a number (for December) in getData()for the month variable. How can I covert this object into a number type or string type if necessary? P.S. I tried using pareInt(). doesn't work.

• javascript
• reactjs
• typescript
• next.js
• luxon

• 1 You shouldn't be returning a ponent just to convert the time. There are plenty of libraries that already do the job such as date-fns, luxon, moment. Please feel free to choose the one that fits your use case and then convert the time in the ponent itself rather than creating a ponent to convert the time. – em_code Commented Dec 7, 2021 at 21:26

3 Answers 3

Rather than having this logic in a React ponent, you should move it to a custom React hook instead. This allows you to easily reuse its return value however you like.

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

const useLiveDataTime = ({
  timezone,
  daysOffset,
  format,
  calendar,
}: IProps) => {
  const [timeLive, setTimeLive] = useState<DateTime>(DateTime.local());

  useEffect(() => {
    const interval = setInterval(() => {
      setTimeLive(
        DateTime.local()
          .setZone(timezone)
          .reconfigure({ outputCalendar: calendar })
          .plus({ days: daysOffset })
      );
    }, 1000);

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

  return timeLive?.toFormat(format);
}; 

export default useLiveDataTime;

You can then retrieve the value as a string so you can pass it to other functions, or render it.

import React from 'react';
import useLiveDataTime from '<path-to>/use-live-date-time';

const SomeComponent: React.FC = () => {
    const month = useLiveDataTime({ timezone: 'Europe/London', format: 'M' });
    console.log(month);
    getData(month);

    return <span>{month}</span>;
};

As you're just using the month of the current time in the ponent you could just use
const month = DateTime.local().setZone(place?.timezone).toFormat('M')
adding a .reconfigure({ outputCalendar: calendar }) and/or .plus({ days: daysOffset }) if required

Even though I am still advocating my opinion that is in the ments, I totally respect if you want to continue the way you have chosen. Therefore, if you want to access the value of the ponent you can do so by calling the children which will hold the value in your case.

console.log(month.props.children) // will return 12 as string