mirror of
https://github.com/Dvorinka/Devour.git
synced 2026-06-04 12:33:04 +00:00
Tomas Dvorak
17 lines
4.5 KiB
JSON
17 lines
4.5 KiB
JSON
{
|
|
"id": "de43c7c4aa2396d5bd9aca68",
|
|
"source": "solid:signals",
|
|
"type": "github-document",
|
|
"title": "conditional-rendering",
|
|
"content": "---\ntitle: Conditional rendering\norder: 1\nuse_cases: \u003e-\n showing/hiding content, loading states, error displays, user permissions,\n dynamic ui, feature toggles\ntags:\n - conditional\n - rendering\n - show\n - switch\n - match\n - ui\nversion: '1.0'\ndescription: \u003e-\n Conditionally render UI elements in Solid using Show, Switch, and Match\n components for clean, readable conditional logic.\n---\n\nConditional rendering is the process of displaying different UI elements based on certain conditions.\nThis is a common pattern in UI development, and is often used to show or hide elements based on user input, data, or other conditions.\n\nSolid offers dedicated components to handle conditional rendering in a more straightforward and readable way.\n\n## Show\n\n`\u003cShow\u003e` renders its children when a condition is evaluated to be true.\nSimilar to the [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) in JavaScript, it uses control logic flow within JSX to determine what to render.\n\n`\u003cShow\u003e` has a `when` property that is used to determine whether or not to render its children.\nWhen there is a change in the state or props it depends on, this property is re-evaluated.\nThis property can be a boolean value, or a function that returns a boolean value.\n\n```jsx\nimport { Show } from \"solid-js\"\n\n\u003cShow when={data.loading}\u003e\n \u003cdiv\u003eLoading...\u003c/div\u003e\n\u003c/Show\u003e\n```\n\n`\u003cShow\u003e` has the `fallback` property that can be used to specify the content to be rendered when the condition evaluates to false.\nThis property can return a JSX element.\n\n```jsx\nimport { Show } from \"solid-js\"\n\n\u003cShow when={!data.loading} fallback={\u003cdiv\u003eLoading...\u003c/div\u003e}\u003e\n\t\u003ch1\u003eHi, I am {data().name}.\u003c/h1\u003e\n\u003c/Show\u003e\n```\n\nIf there are multiple conditions that need to be handled, `\u003cShow\u003e` can be nested to handle each condition.\n\n```jsx\nimport { Show } from \"solid-js\"\n\n\u003cShow when={data.loading}\u003e\n \u003cdiv\u003eLoading...\u003c/div\u003e\n \u003cShow when={data.error}\u003e\n \u003cdiv\u003eError: {data.error}\u003c/div\u003e\n \u003c/Show\u003e\n\u003c/Show\u003e\n```\n\n## Switch and Match\n\nWhen there are multiple conditions that need to be handled, it can be difficult to manage the logic flow with nested `\u003cShow\u003e` components.\nSolid has the `\u003cSwitch\u003e` and `\u003cMatch\u003e` components for this purpose.\n\nSimilar to JavaScript's [switch/case](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch) structure, `\u003cSwitch\u003e` wraps multiple `\u003cMatch\u003e` components so that each condition is evaluated _in sequence_.\nThe first `\u003cMatch\u003e` component that evaluates to true will have its children rendered, and the rest will be ignored.\n\n```jsx\nimport { Switch, Match } from \"solid-js\"\n\n\u003cSwitch\u003e\n \u003cMatch when={condition1}\u003e\n \u003cp\u003eOutcome 1\u003c/p\u003e\n \u003c/Match\u003e\n \u003cMatch when={condition2}\u003e\n \u003cp\u003eOutcome 2\u003c/p\u003e\n \u003c/Match\u003e\n\u003c/Switch\u003e\n```\n\nSimilar to `\u003cShow\u003e`, each `\u003cMatch\u003e` component has a `when` property that is used to determine whether or not to render its children.\nAn optional `fallback` property can also be passed to `\u003cSwitch\u003e` to specify the content be rendered when none of the `\u003cMatch\u003e` components evaluate to true.\n\n```jsx\nimport { Switch, Match } from \"solid-js\"\n\n\u003cSwitch fallback={\u003cp\u003eFallback content\u003c/p\u003e}\u003e\n\t\u003cMatch when={condition1}\u003e\n\t\t\u003cp\u003eOutcome 1\u003c/p\u003e\n\t\u003c/Match\u003e\n\t\u003cMatch when={condition2}\u003e\n\t\t\u003cp\u003eOutcome 2\u003c/p\u003e\n\t\u003c/Match\u003e\n\u003c/Switch\u003e\n```",
|
|
"url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/control-flow/conditional-rendering.mdx",
|
|
"metadata": {
|
|
"path": "src/routes/concepts/control-flow/conditional-rendering.mdx",
|
|
"repo": "solidjs/solid-docs",
|
|
"repo_url": "https://github.com/solidjs/solid-docs.git",
|
|
"size": 3300,
|
|
"source_type": "github"
|
|
},
|
|
"hash": "46d373526c6e98deed65f13650a19c7e64d7562875e134e5053e5e358b0eaf91",
|
|
"timestamp": "2026-02-23T11:43:00.186515604+01:00"
|
|
} |