Support/Help

Sender	Message	Time
29 Jan 2023
Pitohui	Redacted or Malformed Event	16:45:25
Pitohui	Redacted or Malformed Event	16:45:50
b0x_Cub3d#6689	Oh, that one	16:45:50
b0x_Cub3d#6689	most	16:45:56
b0x_Cub3d#6689	I don't use that tutorial since it uses a lot of stuff that doesn't apply to my current project.	16:46:42
b0x_Cub3d#6689	the one in the playlist is better since it goes in about how it works.	16:47:04
Pitohui	Redacted or Malformed Event	16:47:17
Pitohui	Redacted or Malformed Event	16:49:06
b0x_Cub3d#6689	I kinda was until I started looking into JS, web-sys, and bit more into Rust itself.	16:51:42
Pitohui	Redacted or Malformed Event	17:33:59
b0x_Cub3d#6689	Honestly, I'm pretty new to the whole thing the person who uploaded those videos is in this server so you can ask him.	17:34:48
Pitohui	Redacted or Malformed Event	17:36:24
b0x_Cub3d#6689	That should be him.	17:37:29
Pitohui	Redacted or Malformed Event	17:42:09
	gsmlg joined the room.	17:50:39
	Jaro#5648 joined the room.	21:52:33
Jaro#5648	Hi, I'm trying to make a component with dynamically created input fields (based on an API call). I have a struct component: `pub struct PracticeComponent { ... input_refs: Vec<NodeRef>, ... }` and my Component implementation looks like this: impl Component for PracticeComponent { type Message = Msg; type Properties = PracticeComponentProperties; fn create(ctx: &Context<Self>) -> Self { let package = &ctx.props().package; Self { ... input_refs: vec![NodeRef::default(); package.inputs.len()], ... } } fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool { for i in 0..self.input_refs.len() { if let Some(input) = self.input_refs[i].cast::<HtmlInputElement>() { console!(format!("I: {0}, Id: {1}", i, input.id())); } } ... true // Whether to render the component after update }	21:52:34
Jaro#5648	fn view(&self, ctx: &Context<Self>) -> Html { ... html! { <div class="m-6 mx-10"> ... <div class="flex flex-col space-y-4"> { self.inputs .iter() .enumerate() .map( \|(i, input)\| { let nref = self.input_refs[i].clone(); html! { <label for={ i.to_string() } class="flex flex-col"> <span>{ input.name.clone() }</span> <input ref={ nref } class="border border-gray-700" id={ i.to_string() } type="text" placeholder={ input.example.clone() } disabled={ i == 0 } oninput={ ctx.link().callback( move \|e: InputEvent\| { Msg::Input(i) }) } /> </label> } } ) .collect::<Html>() } </div> ... </div> } } ...	21:52:38
Jaro#5648	My problem is that in the update function no matter what index is used it will always print `I: <index>, Id: 0` but `Id` should correspond to the index of the NodeRef	21:53:49
Jaro#5648	* My problem is that in the update function no matter what index is used it will always print `I: <index>, Id: 0` but `Id` should correspond to the index of the NodeRef. Do you guys have any ideas what could be the culprit?	21:54:51
30 Jan 2023
Raiwe	Is there an example somewhere of a parent component sending a message to a child?	03:07:01
Raiwe	Or vice-versa?	03:07:58
Raiwe	Handling recieving a message through the update function seems simple enough, but I'm not sure how to set them up for the sending side to have a reference to the receiver	03:09:00
Overloader	You should be easily able to send something from child to parent with either callbacks or states and from parent to child I guess with callbacks or a mspc where the receiver has set p a timer to periodically check for new messages?	10:43:24
Spanishpear	outside of props?	11:43:18
Spanishpear	but check the examples in the repo: - https://github.com/yewstack/yew/tree/master/examples/communication_child_to_parent - https://github.com/yewstack/yew/tree/master/examples/communication_parent_to_child	11:43:50
	freddy joined the room.	12:35:40
freddy	Hi Im trying to find an example of a working hash router example. Haven’t managed to find one in this server or on the docs. Could anyone supply one?	12:35:42
freddy	nvm i figured it out	13:27:55
Raiwe	Yeah, those just have a component's html send a message back to the same component that defined it. I thought the point of messages would be communication between components, but I guess for that you're supposed to use callbacks?	13:36:31

Pitohui

Redacted or Malformed Event

16:45:25

Pitohui

Redacted or Malformed Event

Oh, that one

most

I don't use that tutorial since it uses a lot of stuff that doesn't apply to my current project.

16:46:42

b0x_Cub3d#6689

the one in the playlist is better since it goes in about how it works.

16:47:04

Pitohui

Redacted or Malformed Event

16:47:17

Pitohui

Redacted or Malformed Event

16:49:06

b0x_Cub3d#6689

I kinda was until I started looking into JS, web-sys, and bit more into Rust itself.

16:51:42

Pitohui

Redacted or Malformed Event

17:33:59

b0x_Cub3d#6689

Honestly, I'm pretty new to the whole thing the person who uploaded those videos is in this server so you can ask him.

17:34:48

Pitohui

Redacted or Malformed Event

That should be him.

Redacted or Malformed Event

17:42:09

gsmlg joined the room.

17:50:39

Jaro#5648 joined the room.

21:52:33

Jaro#5648

Hi, I'm trying to make a component with dynamically created input fields (based on an API call).

I have a struct component:

pub struct PracticeComponent {
    ...
    input_refs: Vec<NodeRef>,
    ...
}

and my Component implementation looks like this:

impl Component for PracticeComponent {
    type Message = Msg;
    type Properties = PracticeComponentProperties;

    fn create(ctx: &Context<Self>) -> Self {
        let package = &ctx.props().package;
        Self {
            ...
            input_refs: vec![NodeRef::default(); package.inputs.len()],
            ...
        }
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        for i in 0..self.input_refs.len() {
            if let Some(input) = self.input_refs[i].cast::<HtmlInputElement>() {
                console!(format!("I: {0}, Id: {1}", i, input.id()));
            }
        }
        ...
        true // Whether to render the component after update
    }

21:52:34

Jaro#5648

    fn view(&self, ctx: &Context<Self>) -> Html {
        ...
        html! {
            <div class="m-6 mx-10">
                ...
                <div class="flex flex-col space-y-4">
                {
                    self.inputs
                        .iter()
                        .enumerate()
                        .map( |(i, input)| {
                            let nref = self.input_refs[i].clone();
                            html!
                            {
                                <label for={ i.to_string() } class="flex flex-col">
                                <span>{ input.name.clone() }</span>
                                <input
                                        ref={ nref }
                                        class="border border-gray-700"
                                        id={ i.to_string() }
                                        type="text"
                                        placeholder={ input.example.clone() }
                                        disabled={ i == 0 }
                                        oninput={ ctx.link().callback( move |e: InputEvent| {
                                            Msg::Input(i)
                                        }) }
                                    />
                                </label>
                            }
                        }
                        )
                        .collect::<Html>()
                }
                </div>
            ...
            </div>
        }
    }
...

21:52:38

Jaro#5648

My problem is that in the update function no matter what index is used it will always print I: <index>, Id: 0 but Id should correspond to the index of the NodeRef

21:53:49

Jaro#5648

* My problem is that in the update function no matter what index is used it will always print I: <index>, Id: 0 but Id should correspond to the index of the NodeRef.
Do you guys have any ideas what could be the culprit?

21:54:51

Raiwe

Is there an example somewhere of a parent component sending a message to a child?

Or vice-versa?

Handling recieving a message through the update function seems simple enough, but I'm not sure how to set them up for the sending side to have a reference to the receiver

03:09:00

Overloader

You should be easily able to send something from child to parent with either callbacks or states and from parent to child I guess with callbacks or a mspc where the receiver has set p a timer to periodically check for new messages?

outside of props?

but check the examples in the repo:
- https://github.com/yewstack/yew/tree/master/examples/communication_child_to_parent
- https://github.com/yewstack/yew/tree/master/examples/communication_parent_to_child

11:43:50

freddy joined the room.

12:35:40

freddy

Hi Im trying to find an example of a working hash router example. Haven’t managed to find one in this server or on the docs. Could anyone supply one?

nvm i figured it out

Yeah, those just have a component's html send a message back to the same component that defined it. I thought the point of messages would be communication between components, but I guess for that you're supposed to use callbacks?

13:36:31

Load older messages

There are no newer messages yet.

	Support/Help	647 Members
		4 Servers