#How to `create()` component

1 messages · Page 1 of 1 (latest)

cedar ermine
#

I would like to call the create function of a component to store it as a field of a parent component. I am aware of the nesting by storing Properties approach, but I would like to store maintain the non-Properties state as well. Is this possible?, If yes, how do I create the required &Context<T>.

solemn apex
#

what i always think when people say they want to store components somewhere, is that components are the thing that is always drawn, so there is no reason to store it off somewhere else other than just rendering them

just have data that makes up the component stored in parent (which would be infinitely easier than storing a component), and rendering of the child components will mount ("store component")/unmount ("remove from storage")

to send data between parent and children back and forth use props and callbacks

cedar ermine
#

What if I'm not the author of the child component? Then I can't control which parts of the state are exposed as props.

solemn apex
#

arent all components rendered the same general way? if you are trying to access some child component's data without them providing a way for you to do it (so no callback prop), that sounds wrong

#

i have an example, if you have a list component, which draws items, you input list data into that list component, so your parent is actually in control of that list data, so you dont even need to know what that list component does

cedar ermine
#

The child component in question has a text input and stores the content of the input internally for validation, but only exposes it after another interaction. If I only store the props and temporarily don't render the component, the editing state of the input is lost because instantiating it again creates it with an empty input.

solemn apex
#

what does after another interaction mean and why do you need to temporarily not render it?

cedar ermine
#

I'll try to simplify the actual case a bit: Imagine the child component is a list that can be edited. So it renders the props (e.g. Vec<String>), but also has a text input whose state is stored internally and an "add" button. Only after clicking the "add" button is the content of the text input pushed to the props vector.

solemn apex
#

so like (sorry i know only fn components properly),

#[function_component]
pub fn Parent() -> Html {
    html! {
        <Child />
    }
}

#[function_component]
pub fn Child() -> Html {
    let list = use_state(|| Vec::<String>::new());
    let text = use_state(|| "");
    let onchange = ...text.set(e.text) or something...;
    let onclick = ...list.add(text) or something...;
    html! {
        { for list... }
        <input type="text" { onchange } />
        <button { onclick }>{ "add" }</button>
    }
}
#

or is list child's prop?

cedar ermine
#

Yes, list would be a Child's prop, but otherwise that's what I tried to describe.

solemn apex
#

okay, so parent is actually in control of list by the looks of it then, right?

#

whats the issue you are trying to solve then

cedar ermine
#

yes, but not in control of text, that's the issue.

solemn apex
#

you are trying to validate text before it gets added to the list or something?

cedar ermine
#

Yes, the details are a bit more complicated, but the example captures the issue. More generally: There are internal child component states, that I would like to preserve sometimes and the only direction I could think of is to create the component value myself.

solemn apex
solemn apex
cedar ermine
solemn apex
#

so you want to store the component but never read it?

cedar ermine
#

Yes, I want to store it and use it in the view function.