Function For

pub fn For<E, T, G, I, K>(
    cx: Scope,
    props: ForProps<E, T, G, I, K>,
) -> Memo<Vec<Element>>
where
    E: Fn() -> Vec<T> + 'static,
    G: Fn(Scope, &T) -> Element + 'static,
    I: Fn(&T) -> K + 'static,
    K: Eq + Hash,
    T: Eq + Debug + 'static,

Iterates over children and displays them, keyed by the key function given.

This is much more efficient than naively iterating over nodes with .iter().map(|n| view! { cx, ... })..., as it avoids re-creating DOM nodes that are not being changed.

#[derive(Copy, Clone, Debug, PartialEq, Eq)]
struct Counter {
  id: usize,
  count: RwSignal<i32>
}

fn Counters(cx: Scope) -> Element {
  let (counters, set_counters) = create_signal::<Vec<Counter>>(cx, vec![]);

  view! {
    cx,
    <div>
      <For
        // a function that returns the items we're iterating over; a signal is fine
        each=counters
        // a unique key for each item
        key=|counter| counter.id
      >
        {|cx: Scope, counter: &Counter| {
          let count = counter.count;
          view! {
            cx,
            <button>"Value: " {move || count.get()}</button>
          }
        }
      }
      </For>
    </div>
  }
}