Project created using React and Typescript.
I'm using from react-transition-group to handle a small animation when opening/closing a menu. The animation effect seems to function just fine, but on every page load it displays a browser error related to That says 'CSSTransition cannot be used as a JSX component"
Here is the error message in the browser (same error appears in VS Code when hovering the :
'CSSTransition' cannot be used as a JSX component.
Its instance type 'CSSTransition<HTMLElement | undefined>' is not a valid JSX element.
The types returned by 'render()' are incompatible between these types.
Type '{}' is not assignable to type 'ReactNode'.ts(2786)
For reference, this is the component using the CSS Transition:
import React, { PropsWithChildren, useState } from 'react';
import { useTranslation } from 'react-i18next';
import './collapsibleSection.scss';
import { ReactComponent as ChevronDown } from '~/assets/icons/chevron_down.svg';
import { FlatButton } from '../flatButton/FlatButton';
import { CSSTransition } from 'react-transition-group';
type CollapsibleSectionProps = {
color: 'blue' | 'yellow';
};
export function CollapsibleSection({ children, color = 'yellow' }: PropsWithChildren<CollapsibleSectionProps>) {
const [t] = useTranslation();
const [isOpen, setIsOpen] = useState(false);
return (
<section className={`collapsible-section ${isOpen ? 'collapsible-section--open' : ''}`}>
<h2>
<FlatButton
ariaExpanded={isOpen}
buttonType={color === 'yellow' ? 'light' : 'dark'}
onClick={() => setIsOpen(!isOpen)}
title={t('guide.viewMore')}
>
<ChevronDown className="collapsible-section__icon" aria-hidden="true" />
</FlatButton>
</h2>
<CSSTransition in={isOpen} timeout={300} classNames="animation" unmountOnExit>
<div>{children}</div>
</CSSTransition>
</section>
);
}
Like I said, it seems like the animation works fine, but I'd like to resolve the IDE error and browser error if possible. Any suggestions on how to resolve? I've tried updating the react-transition-group package and the type definitions but no luck.
