Issue
I created a react function EventDateTooltip:
import React from 'react';
import { endOfDay, isToday, isTomorrow, isYesterday } from 'date-fns';
import { useTranslation } from 'react-i18next';
import I18nWrapper from '../i18n-wrapper';
import DateFormater from '../formaters/date-formater';
const EventDateTooltip = ({ date }: { date: string }) => {
const { t } = useTranslation();
const dateTooltip = endOfDay(new Date(date));
if (isTomorrow(dateTooltip)) return t('tooltip.event.date.tomorrow');
if (isYesterday(dateTooltip)) return t('tooltip.event.date.yesterday');
if (isToday(dateTooltip)) return t('tooltip.event.date.today');
return (
<>
<span key={date.toString()}>
<I18nWrapper translateKey="tooltip.event.date.the" />{' '}
<DateFormater dateToFomat={date} formater="full-date" />
</span>
</>
);
};
export default EventDateTooltip;
this function return a text and a translated date.
when I call this function on another component:
<EventDateTooltip date={props.event.endDate}></EventDateTooltip>;
the call returns the following error message:
Its return type 'string | Element' is not a valid JSX element.
Type 'string' is not assignable to type 'Element | null'. TS2786
has anyone got the following message ?
Solution
As stated in this answer, currently TypeScript's React types do not allow you to return a string from a React component and include that in a component tree.
You can wrap your strings with fragments to avoid the error:
// [...]
if (isTomorrow(dateTooltip)) return <>t('tooltip.event.date.tomorrow')</>;
if (isYesterday(dateTooltip)) return <>t('tooltip.event.date.yesterday')</>;
if (isToday(dateTooltip)) return <>t('tooltip.event.date.today')</>;
// [...]
Answered By - Roman Mkrtchian
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.