{"record":{"id":"3bc00f21848cacee","repo":"yewstack/yew","slug":"no-ctx-found-3bc00f","errorCode":null,"errorMessage":"no ctx found","messagePattern":"no ctx found","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"error","filePath":"website/versioned_docs/version-0.23/concepts/contexts.mdx","lineNumber":144,"sourceCode":"}\n\n/// The toolbar.\n/// This component has access to the context\n#[component]\npub fn Toolbar() -> Html {\n    html! {\n        <div>\n            <ThemedButton />\n        </div>\n    }\n}\n\n/// Button placed in `Toolbar`.\n/// As this component is a child of `ThemeContextProvider` in the component tree, it also has access\n/// to the context.\n#[component]\npub fn ThemedButton() -> Html {\n    let theme = use_context::<Theme>().expect(\"no ctx found\");\n\n    html! {\n        <button style={format!(\"background: {}; color: {};\", theme.background, theme.foreground)}>\n            { \"Click me!\" }\n        </button>\n    }\n}\n```\n\n### Step 2: Consuming context\n\n#### Function components\n\n`use_context` hook is used to consume contexts in function components.\nSee [docs for use_context](https://yew-rs-api.web.app/next/yew/functional/fn.use_context.html) to learn more.\n\n#### Struct components\n","sourceCodeStart":126,"sourceCodeEnd":162,"githubUrl":"https://github.com/yewstack/yew/blob/0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3/website/versioned_docs/version-0.23/concepts/contexts.mdx#L126-L162","documentation":"This panic is `use_context::<Theme>().expect(\"no ctx found\")` in `ThemedButton` from Yew 0.23's contexts guide. `use_context::<Theme>()` returns None unless an ancestor in the Yew component tree rendered `<ContextProvider<Theme> context={(*ctx).clone()}>` — the role `ThemeContextProvider` plays in the same page. The button's own doc comment requires it to be a child of that provider; rendered anywhere else, the expect panics.","triggerScenarios":"Rendering `<ThemedButton/>` outside the `ThemeContextProvider` subtree; provider and consumer disagreeing on the context type (wrapper vs bare struct); provider unmounting on navigation while the button stays mounted.","commonSituations":"Reusing the guide's button in new routes not wrapped by the provider; refactors moving the provider; struct renames during Yew upgrades that split provider and consumer types.","solutions":["Wrap the consumer tree in `<ContextProvider<Theme> context={...}>` via `ThemeContextProvider`","Verify provider and consumer use the exact same `Theme` type","Replace the expect with `unwrap_or_default()` or a fallback `match` arm","Mount the button inside the provider in tests"],"exampleFix":"// before\nlet theme = use_context::<Theme>().expect(\"no ctx found\");\n\n// after — default theme when no provider is present\nlet theme = use_context::<Theme>().unwrap_or_default();\nhtml! {\n    <button style={format!(\"background: {}; color: {};\", theme.background, theme.foreground)}>\n        { \"Click me!\" }\n    </button>\n}","handlingStrategy":"fallback","validationCode":"#[hook]\nfn use_theme() -> Theme {\n    use_context::<Theme>().unwrap_or_default()\n}\n\n// and make sure the tree renders:\n// <ContextProvider<Theme> context={(*ctx).clone()}> <Toolbar> <ThemedButton/> </Toolbar> </ContextProvider<Theme>>","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Provide <ContextProvider<Theme>> high in the tree (root layout) so all routes inherit it","Route context reads through one accessor hook with an explicit default","Keep provider and consumer on the same Theme struct definition","Add a test mounting ThemedButton under ThemeContextProvider"],"tags":["yew","context","hooks","panic"],"backgroundTag":"context-provider-missing","analyzedSha":"0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3","analyzedAt":"2026-08-22T21:16:31.212Z","schemaVersion":2},"datasetVersion":"2026-08-23T01:17:44.959Z"}