Conditional.tsx

import React, { createElement } from "react";

/*
  Tired of writing ((blabla && blabla) && <>blabla</>)
*/

interface Props extends React.HTMLAttributes<HTMLElement> {
  if: any;
  as?: React.ElementType;
  children?: React.ReactNode;
}

const Conditional: React.FC<Props> = ({
  if: shouldRender,
  as: tagName,
  children,
  ...props
}) => {
  return shouldRender
    ? createElement(tagName ?? React.Fragment, props, children)
    : null;
};

export default Conditional;

Usage.tsx

{/* TS doesn't work: data possibly undefined */}
<Conditional if={data} as="span" className="test">
  <strong>{data?.title}</strong>
  <p>{data?.description}</p>
</Conditional>

{/* TS works: data always correct type */}
{data && (
  <span>
    <strong>{data.title}</strong>
    <p>{data.description}</p>
  </span>
)}