Switch and Case

Switch and case are two components that work together to provide conditional rendering. They both have an `of=` prop - if the case's `of` prop matches the switch's, that case's child will be rendered. Otherwise, a default case (if provided) will be rendered.

Switch

A component that Renders any element that was rendered by a <Case/>. If nothing is rendered by a case statement it will render a message telling you to pass in a case component.

<Switch of={unknown} cloak={true|undefined} >
    {Array<Case>}
</Switch>

Props

These are the props that are useable.

Required

Prop	Type	Description
of	`any`	Takes any value that Astro accepts. Used to determine which case to render.
children	`Array<Case>`	One or more `<Case />` components whose children will be rendered if their `of` prop matches the switch.

Optional

Prop	Type	Default	Description
cloak	`boolean\\|undefined`	`undefined`	When true, cases that don't match will be rendered with `display: none` instead of being omitted from the output.

Case

This component must be under a <Switch/> to be useful. It takes in either a of= prop or a default= prop. The user must pick between either one. It also has to have a child that is HTML. This component will render it's HTML if the of= prop passed is the same as the one in Switch. Of if none of it's other siblings were rendered But. A default prop was placed on it. Then that child will render.

<Case of={unknown} >
    {Array<astro.JSX.HTMLAttributes>}
</Case>

Props

These are the props that are useable.

Required

Prop	Type	Description
children	`Array<HTMLElement>`	One or more HTML elements to be rendered when this case matches or is the default.
of	`any`	Takes any value that Astro accepts. Case will render when this matches the parent Switch's value.

Optional

Prop	Type	Default	Description
default	`boolean`	`false`	When true, this case's children will be rendered if no other case matches the switch value.