From f0c27e2e42e86a3d3a5321d13cfc4131e8e35cd7 Mon Sep 17 00:00:00 2001
From: Hamza <muhammadhamza1311@gmail.com>
Date: Thu, 25 Feb 2021 11:48:46 +0500
Subject: [PATCH] fix example

---
 docs/concepts/function-components/pre-defined-hooks.md | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/docs/concepts/function-components/pre-defined-hooks.md b/docs/concepts/function-components/pre-defined-hooks.md
index 54a1cb92198..107e0360aeb 100644
--- a/docs/concepts/function-components/pre-defined-hooks.md
+++ b/docs/concepts/function-components/pre-defined-hooks.md
@@ -293,7 +293,8 @@ pub fn app() -> Html {
     });
 
     html! {
-        <ContextProvider<Theme> context=ctx>
+        // `ctx` is type `Rc<Theme>` while we need `Theme` so we deref it
+        <ContextProvider<Theme> context=(*ctx).clone()>
             // Every child here and their children will have access to this context.
             <Toolbar />
         </ContextProvider<Theme>>
@@ -315,7 +316,7 @@ pub fn toolbar() -> Html {
 /// As this component is a child of `ThemeContextProvider` in the component tree, it also has access to the context.
 #[function_component(ThemedButton)]
 pub fn themed_button() -> Html {
-    let theme = use_context::<Rc<Theme>>().expect("no ctx found");
+    let theme = use_context::<Theme>().expect("no ctx found");
 
     html! {
         <button style=format!("background: {}; color: {};", theme.background, theme.foreground)>