How to dynamically add child components to parent.

[ech0r]

Hello!

I'm new to front-end development, so this might be an obvious question - but I can't seem to wrap my head around how I would dynamically add a child component to a parent. It wasn't clear to me in the docs on how to do this - or if I even should.

Can I use a button click in the parent to send a message, then use the update function to create and then add a child component?

If anyone could point me in the right direction it would be much appreciated!

[voidpumpkin]

• You need to keep a vec of html elements in the parents state. function components struct components
• Create a callback that when called/emited with a new html element as an argument, adds it to the the list in the state function components struct components
• pass that callback as a prop to the child compoennt that has that button you mentioned, the button when clicked should emit the callback from the props

[ech0r]

Thanks for your response!

I've tried extending the example but I am having trouble with these parts:

Create a callback that when called/emited with a new html element as an argument, adds it to the the list in the state
pass that callback as a prop to the child compoennt that has that button you mentioned

Please see my code below:

use yew::prelude::*;

enum Msg {
    AddOne,
}

struct Child {
    value: i64,
}

impl Component for Child {
    type Message = Msg;
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self {
            value: 0,
        }
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::AddOne => {
                self.value += 1;
                // the value has changed so we need to
                // re-render for it to appear on the page
                true
            }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        // This gives us a component's "`Scope`" which allows us to send messages, etc to the component.
        let link = ctx.link();
        html! {
            <div>
                <button onclick={link.callback(|_| Msg::AddOne)}>{ "+1" }</button>
                <p>{ self.value }</p>
            </div>
        }
    }
}

#[derive(Default, Properties, PartialEq)]
pub struct ListProps {
    #[prop_or_default]
    pub children: Children,
}

enum PMsg {
    AddChild,
}

struct Parent {
    children: Vec<Child>,
}

impl Component for Parent {
    type Message = PMsg;
    type Properties = ListProps;

    fn create(_ctx: &Context<Self>) -> Self {
        Self {
            children: Vec::new(),
        }
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            PMsg::AddChild => {
                // add child here?
                self.children.push(Child { value: 0 });
                true
            }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        // This gives us a component's "`Scope`" which allows us to send messages, etc to the component.
        let link = ctx.link();
        html! {
            <div>
                <button onclick={link.callback(|_| PMsg::AddChild)}>{ "Create Child" }</button>
                { for ctx.props().children.iter() }
            </div>
        }
    }
}



fn main() {
    yew::start_app::<Parent>();
}

[voidpumpkin]

Looks to me like you are almost there.
What you are missing is just using self.children in the Parent view function and turning it into html.
Docs how to do that: https://yew.rs/docs/concepts/html/lists#keyed-lists

[ech0r]

@voidpumpkin Thanks again for your help!

I think I've almost got it, is this a valid approach? One issue I'm having is globally updating all the values of the child components, through the logging I can see the values change, but what is rendered doesn't seem to update.

main.rs:

use yew::prelude::*;
use rand::Rng;

enum Msg {
    AddOne,
    SubtractOne,
}

#[derive(Properties, PartialEq)]
struct ChildProps {
    value: i64,
}

#[derive(Debug, Clone)]
struct Child {
    value: i64,
}

impl Child {
    fn decrement(&mut self) {
        self.value -= 1;
    }
}

impl Component for Child {
    type Message = Msg;
    type Properties = ChildProps;

    fn create(ctx: &Context<Self>) -> Self {
        Self {
            value: ctx.props().value,
        }
    }

    fn changed(&mut self, _ctx: &Context<Self>) -> bool {
        true
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::AddOne => {
                self.value += 1;
                true
            },
            Msg::SubtractOne => {
                self.value -= 1;
                true
            },
        }
    }
    
    fn view(&self, ctx: &Context<Self>) -> Html {
        let link = ctx.link();
        html! {
            <div>
                <button onclick={link.callback(|_| Msg::AddOne)}>{"+1"}</button>
                <button onclick={link.callback(|_| Msg::SubtractOne)}>{"-1"}</button>
                <p>{self.value}</p>
            </div>
        }
    }
}

enum PMsg {
    AddChild,
    RemoveChild, 
    DecrementAll,
    IncrementAll,
}

#[derive(Default, Properties, PartialEq)]
struct ParentProps {
    children: Children,
}

#[derive(Debug, Clone)]
struct Parent {
    children: Vec<Child>,
}

impl Component for Parent {

    type Message = PMsg;
    type Properties = ParentProps;

    fn create(ctx: &Context<Self>) -> Self {
        Self {
            children: Vec::new(),
        }
    }

    fn changed(&mut self, _ctx: &Context<Self>) -> bool {
        true
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            PMsg::AddChild => {
                self.children.push( Child { value: 0 });
                log::info!("child values: {:?}", self.children);
                true
            },
            PMsg::RemoveChild => {
                self.children.pop();
                log::info!("child values: {:?}", self.children);
                true
            },
            PMsg::DecrementAll => {
                for child in self.children.iter_mut() {
                    child.value -= 1;
                }
                log::info!("child values: {:?}", self.children);
                true
            },
            PMsg::IncrementAll => {
                for child in self.children.iter_mut() {
                    child.value += 1;
                }
                log::info!("child values: {:?}", self.children);
                true
            }
        }
    }
    
    fn view(&self, ctx: &Context<Self>) -> Html {
        let link = ctx.link();
        html! {
            <div>
                <button onclick={link.callback(|_| PMsg::AddChild)}>{"Create Child"}</button>
                <button onclick={link.callback(|_| PMsg::RemoveChild)}>{"Remove Child"}</button>
                <button onclick={link.callback(|_| PMsg::DecrementAll)}>{"Decrement All Children"}</button>
                <button onclick={link.callback(|_| PMsg::IncrementAll)}>{"Increment All Children"}</button>
                {
                    self.children.clone().into_iter().map(|child| {
                        log::info!("child value: {}", child.value);
                        html! {
                            <Child value={child.value}/>
                        }
                    }).collect::<Html>()
                }
            </div>
        }
    }
}

fn main() {
    yew::start_app::<Parent>();
    wasm_logger::init(wasm_logger::Config::default());
}

Cargo.toml:

[dependencies]
yew = "0.19.3"
log = "0.4.14"
wasm-logger = "0.2.0"
getrandom = { version = "0.2", features = ["js"] }
rand = "0.8.4"

[voidpumpkin]

I have not seen yet why it does not update html for you.
Try adding the special key prop to your Child component https://yew.rs/docs/concepts/html/lists#keyed-list

[ech0r]

Thanks for following up - you were right all along!

[KySpace]

I don't understand the usage of for here { for ctx.props().children.iter() }, is it a feature of the macro or the language? Would you specify?

[WorldSEnder]

Yes, this is special syntax allowed in the html! macro, explained as "Syntax type 2" in the expanded docs on lists and iterables. The difference is that the syntax is in general a bit more versatile than manually calling collect::<Html> on the iterator, but in this case it make no real difference. For example, the special syntax can avoid the allocation of intermediate vectors that collect would entail.

There is also special syntax for conditionals.