{"record":{"id":"b6d3ed516353ceef","repo":"yewstack/yew","slug":"no-ctx-found-b6d3ed","errorCode":null,"errorMessage":"no ctx found","messagePattern":"no ctx found","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"error","filePath":"website/versioned_docs/version-0.21/concepts/contexts.mdx","lineNumber":144,"sourceCode":"}\n\n/// The toolbar.\n/// This component has access to the context\n#[function_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#[function_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.21/concepts/contexts.mdx#L126-L162","documentation":"The contexts tutorial calls use_context::<Theme>() inside ThemedButton and expects a value; the Option is None unless a ContextProvider<Theme> is mounted above the button (in the docs, ThemeContextProvider supplies it). Rendered standalone - or after a refactor removes the provider - the expect panics.","triggerScenarios":"Mounting ThemedButton without <ContextProvider<Theme>> above it; provider and consumer requesting different types; the provider itself being conditionally not rendered on some pass.","commonSituations":"Tests or stories rendering the button in isolation; app-tree refactors that move consumers out from under the provider; learners running snippets piecemeal without the provider component.","solutions":["Wrap consumers with the provider as the tutorial does: <ContextProvider<Theme> context={...}> ... </ContextProvider<Theme>>","Confirm the consumer is a descendant of the provider, not a sibling","Treat context as optional where appropriate: use_context::<Theme>().unwrap_or_default()","In isolated tests, provide the context explicitly or assert against the default"],"exampleFix":"// before\nhtml! { <ThemedButton /> } // no ThemeContextProvider above -> panic\n\n// after\nhtml! {\n    <ContextProvider<Theme> context={Theme::default()}>\n        <ThemedButton />\n    </ContextProvider<Theme>>\n}","handlingStrategy":"fallback","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":["Mount <ContextProvider<Theme>> above every ThemedButton before relying on use_context","Where a default exists, use use_context::<Theme>().unwrap_or_default() rather than expect","Wrap isolated component tests with a provider or use the default theme"],"tags":["context","use-context","docs","provider"],"backgroundTag":"missing-context-provider","analyzedSha":"0e4a05472fac4e5fce1befe60fa4a1e43a36b6a3","analyzedAt":"2026-08-22T21:16:31.212Z","schemaVersion":2},"datasetVersion":"2026-08-23T01:17:44.959Z"}