Signal<Vec<T>> -> Vec<Signal<T>>

[cwahn]

I’m working on a scenario where a parent component receives a Signal<Vec> as a prop and needs to pass down each item as a Signal to its child components. Each child should independently handle its state while keeping the parent collection (Signal<Vec>) reactive as a whole.

Here’s a minimal example to clarify:

use dioxus::prelude::*;
use dioxus_signals::*;

#[derive(Clone)]
struct FormData {
    value: String,
}

#[derive(Props)]
struct ParentProps {
    forms_signal: Signal<Vec<FormData>>,
}

#[component]
fn ParentComponent(props: ParentProps) -> Element {
    let forms_signal = props.forms_signal;

    rsx! {
        div {
            forms_signal.read().iter().enumerate().map(|(index, form)| rsx!(
                ChildComponent {
                    form_signal: ???, // How to derive Signal<T> here?
                }
            ))
        }
    }
}

#[derive(Props)]
struct ChildProps {
    form_signal: Signal<FormData>,
}

#[component]
fn ChildComponent(props: ChildProps) -> Element {
    rsx! {
        div {
            input {
                value: "{props.form_signal.read().value}",
                oninput: move |evt| {
                    props.form_signal.write().value = evt.value.clone();
                }
            }
        }
    }
}

Goal:
Take Signal<Vec> as a prop in the parent.
Pass each item as Signal to children.
Ensure modifications in children (Signal) sync back to the parent Signal<Vec>.
Is this achievable with Dioxus Signals, or would this require a custom synchronization pattern? If the latter, what would be the most efficient way to handle this?

Thanks in advance!

[cwahn]

It seems 1805#issue is related.
However, the documentation said Writable is not dyn compatible.

[ealmloff]

This would require the mutable equivalent of Readable::map which doesn't exist yet. It seems fairly easy to add if you want to open an issue. With Writable::map you could do something like this:

fn List(list: Signal<Vec<i32>>) -> Element {
    rsx! {
        for index in 0..list.len() {
            // We can use the `map` method to provide a view into the single item in the list that the child component will render
            Item { item: list.map_mut(move |v| &v[index]) }
        }
    }
}

// The child component doesn't need to know that the mapped value is coming from a list
#[component]
fn Item(item: MappedSignalMut<i32>) -> Element {
    rsx! {
        button { onclick: |_| item += 1 }
    }
}

Without Writable::map, you can pass the signal vec and index separately and index into the vector every time you need the element

[cwahn]

Thank you for the swift response.
I would say this feature is quite important for dynamic form generation. (e.g. JSON form)
I am not sure about the implementation feasibility, since I don't have deep understanding of Signal system of Dioxus, but would like to open an issue.

[cwahn]

Issue #3610 has been opened.
Closing the discussion :)