An easy way to use CSS transitions in React to animate a child element in and out

Animate.tsx

import React, { FC, useEffect, useState, ReactNode } from 'react'
import styled from '@emotion/styled'

const FadeInAndOut = styled.p`
  transition: opacity 0.5s;
  opacity: 0;
  &.fadeIn {
    opacity: 1;
  }
`

export const Animate: FC = ({ children, ...props }) => {
  const [child, setChild] = useState<ReactNode>()
  useEffect(() => {
    if (children == null) {
      setTimeout(() => {
        setChild(children)
      }, 500)
    } else {
      setChild(children)
    }
  }, [children])

  return (
    <FadeInAndOut className={children && 'fadeIn'} {...props}>
      {child}
    </FadeInAndOut>
  )
}