when.tsx

function When<T>(props: {
  condition: T
  children?: React.ReactNode | ((data: NonNullable<T>) => React.ReactNode)
  fallback?: React.ReactNode
}) {
  const { condition, children, fallback } = props

  if (condition) {
    if (typeof children === 'function') {
      return children?.(condition) ?? null
    }

    return children ?? null
  }

  return fallback ?? null
}

export function App() {
  const data: string | null = Math.random() > 0.5 ? 'hi' : null

  return (
    <When condition={data} fallback="no data found">
      {(data) => <div>Child {data.toUpperCase()}</div>}
    </When>
  )
}