basic conditional render in react

View.tsx

import { Children } from "react";

import type { ViewProps, ViewIfElseProps } from "./View.types";

export default function View({ viewIf, div, children }: ViewProps) {
  if (Children.count(children) > 2)
    throw new Error(
      "View component can only have 2 children, View.If and View.Else"
    );
  if (viewIf === true) return <>{Children.toArray(children)[0]}</>;
  return <>{Children.toArray(children)[1]}</>;
}

function ViewIf({ children, hidden, visible }: ViewIfElseProps) {
  if (typeof hidden == null && typeof visible == null) return <>{children}</>;
  if (hidden === true) return <></>;
  if (visible === false) return <></>;
  return <>{children}</>;
}

View.If = ViewIf;
View.Else = ViewIf;

View.types.ts

export interface ViewProps {
  viewIf?: boolean;
  children?: React.ReactNode;
  className?: string;
  div?: boolean;
  hidden?: boolean;
}

export interface ViewIfElseProps {
  children: React.ReactNode;
  hidden?: boolean;
  visible?: boolean;
}

usage:

<View viewIf={theme === "dark"}>
  <View.If>
    <MdDarkMode />
  </View.If>
  <View.Else>
    <MdLightMode />
  </View.Else>
</View>

Single usage:

<View.If visible={theme == "dark"}>
  <MdDarkMode />
</View.If>

or

<View.If hidden={theme == "light"}>
  <MdDarkMode />
</View.If>