How to pass state down through context?

[ChocolateLoverRaj]

What is the Rust equivalent of this?

import React, { createContext, useContext, useState } from 'react';
import './style.css';

const Context = createContext(undefined);

export default function App() {
  let [count, setCount] = useState(0);

  return (
    <Context.Provider value={[count, setCount]}>
      <SubComponent />
    </Context.Provider>
  );
}

function SubComponent() {
  const [count, setCount] = useContext(Context);

  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => setCount((count) => count + 1)}>
        Change state of <code>App</code> component
      </button>
    </>
  );
}

https://stackblitz.com/edit/stackblitz-starters-dxbkzu?description=A%20create-react-app%20project%20based%20on%20react%20and%20react-dom&file=src%2FApp.js&title=React%20Starter

[ChocolateLoverRaj]

This is my attempt:

use wasm_bindgen::JsValue;
use wasm_react::hooks::{use_context, use_state};
use wasm_react::{export_components, h, Component, ContextProvider, VNode};
mod counter;

use wasm_react::{create_context, hooks::State, Context};

thread_local! {
  pub static STATE_CONTEXT: Context<Option<State<i32>>> = create_context(None.into());
}

pub struct App;

impl Component for App {
    fn render(&self) -> VNode {
        let state = use_state(|| 0);
        ContextProvider::from(&STATE_CONTEXT)
            .value(Some(Some(state).into()))
            .build(SubComponent {}.build())
    }
}

pub struct SubComponent;

impl Component for SubComponent {
    fn render(&self) -> VNode {
        let context = use_context(&STATE_CONTEXT);
        h!(h1).build(*context.unwrap().value())
    }
}

impl TryFrom<JsValue> for App {
    type Error = JsValue;

    fn try_from(_: JsValue) -> Result<Self, Self::Error> {
        Ok(App)
    }
}

export_components! { App }

Except it has this error:

[yishn]

Since context is a Rc, you can simply clone it:

h!(h1).build(*context.clone().unwrap().value())

But in your case this might not be necessary, since you don't need to take ownership you can use Option::as_ref():

h!(h1).build(*context.as_ref().unwrap().value())

[ChocolateLoverRaj]

I got it to work. @yishn am I doing this correctly?

use wasm_bindgen::JsValue;
use wasm_react::hooks::{use_context, use_state};
use wasm_react::{clones, export_components, h, Callback, Component, ContextProvider, VNode};
mod counter;

use wasm_react::{create_context, hooks::State, Context};

thread_local! {
  pub static STATE_CONTEXT: Context<Option<State<i32>>> = create_context(None.into());
}

pub struct App;

impl Component for App {
    fn render(&self) -> VNode {
        let state = use_state(|| 0);
        ContextProvider::from(&STATE_CONTEXT)
            .value(Some(Some(state).into()))
            .build(SubComponent {}.build())
    }
}

pub struct SubComponent;

impl Component for SubComponent {
    fn render(&self) -> VNode {
        let context = use_context(&STATE_CONTEXT);
        let v_node: VNode = match context.as_ref() {
            Some(state) => (*state.value()).into(),
            None => "No context provider".into(),
        };
        h!(div).build((
            h!(h1).build(v_node),
            h!(button)
                .on_click(&Callback::new({
                    move |_| {
                        if let Some(state) = context.as_ref() {
                            clones!(mut state);
                            state.set(|a| a + 1);
                        }
                    }
                }))
                .build("Change state of higher component"),
        ))
    }
}

impl TryFrom<JsValue> for App {
    type Error = JsValue;

    fn try_from(_: JsValue) -> Result<Self, Self::Error> {
        Ok(App)
    }
}

export_components! { App }

[yishn]

Looks good