From 65798e430f897f337a866f35299a9382f07197d0 Mon Sep 17 00:00:00 2001
From: Oliver <31621019+purung@users.noreply.github.com>
Date: Fri, 20 Dec 2024 19:00:46 +0100
Subject: [PATCH] docs: showcase let syntax in for_loop (closes #3059) (#3383)

* docs: showcase let syntax in for_loop

* fix: doctests on for_loop

---------

Co-authored-by: Oliver Nordh <oliver.nordh@proton.me>
---
 leptos/src/for_loop.rs | 61 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/leptos/src/for_loop.rs b/leptos/src/for_loop.rs
index b571a2e2ee..4c64b39174 100644
--- a/leptos/src/for_loop.rs
+++ b/leptos/src/for_loop.rs
@@ -44,6 +44,67 @@ use tachys::{reactive_graph::OwnedView, view::keyed::keyed};
 ///   }
 /// }
 /// ```
+///
+/// For convenience, you can also choose to write template code directly in the `<For>`
+/// component, using the `let` syntax:
+///
+/// ```
+/// # use leptos::prelude::*;
+///
+/// # #[derive(Copy, Clone, Debug, PartialEq, Eq)]
+/// # struct Counter {
+/// #   id: usize,
+/// #   count: RwSignal<i32>
+/// # }
+/// #
+/// # #[component]
+/// # fn Counters() -> impl IntoView {
+/// #   let (counters, set_counters) = create_signal::<Vec<Counter>>(vec![]);
+/// #
+///   view! {
+///     <div>
+///         <For
+///           each=move || counters.get()
+///           key=|counter| counter.id
+///           let(counter)
+///         >
+///             <button>"Value: " {move || counter.count.get()}</button>
+///         </For>
+///     </div>
+///   }
+/// # }
+/// ```
+///
+/// The `let` syntax also supports destructuring the pattern of your data.
+/// `let((one, two))` in the case of tuples, and `let(Struct { field_one, field_two })`
+/// in the case of structs.
+///
+/// ```
+/// # use leptos::prelude::*;
+///
+/// # #[derive(Copy, Clone, Debug, PartialEq, Eq)]
+/// # struct Counter {
+/// #   id: usize,
+/// #   count: RwSignal<i32>
+/// # }
+/// #
+/// # #[component]
+/// # fn Counters() -> impl IntoView {
+/// #   let (counters, set_counters) = create_signal::<Vec<Counter>>(vec![]);
+/// #
+///   view! {
+///     <div>
+///         <For
+///           each=move || counters.get()
+///           key=|counter| counter.id
+///           let(Counter { id, count })
+///         >
+///             <button>"Value: " {move || count.get()}</button>
+///         </For>
+///     </div>
+///   }
+/// # }
+/// ```
 #[cfg_attr(feature = "tracing", tracing::instrument(level = "trace", skip_all))]
 #[component]
 pub fn For<IF, I, T, EF, N, KF, K>(