SwitchCase

SwitchCase es un componente que te permite renderizar componentes de forma declarativa según un valor dado, de manera similar a una instrucción switch-case. Te resulta útil cuando necesitas renderizar distintos componentes de forma condicional según un estado específico.

Interfaz

function SwitchCase<Case>(
  value: Case,
  caseBy: Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null }>,
  defaultComponent?: () => ReactElement | null
): ReactElement | null;

Parámetros

• valuerequired · Case
  

  El valor que quieres comparar. Se renderiza el componente asociado a la clave coincidente en caseBy.

• caseByrequired · Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null }>
  

  Un objeto que relaciona valores con los componentes que quieres renderizar. Las claves representan los valores posibles y los valores son funciones que devuelven los componentes correspondientes.

• defaultComponent() => ReactElement | null
  

  El componente que quieres renderizar si value no coincide con ninguna clave de caseBy.

Valor de retorno

• ReactElement | null
  

  Un componente de React que renderiza de forma condicional según los casos.

Ejemplo

function App() {
  return (
    <SwitchCase
      value={status}
      // Renderiza TypeA, TypeB o TypeC según el valor de status.
      caseBy={{
        a: () => <TypeA />,
        b: () => <TypeB />,
        c: () => <TypeC />,
      }}
      // Renderiza Default cuando el valor de status no coincide con ningún caso.
      defaultComponent={() => <Default />}
    />
  );
}