From a5f844ddcb3bdc063ac00677cba0310d4067f5c1 Mon Sep 17 00:00:00 2001 From: Allan Date: Tue, 8 Nov 2022 11:22:42 -0500 Subject: [PATCH] Use keyed lists in tutorial example (#2948) * Use keyed lists in tutorial example The example should follow best practices such as using keyed lists. * Add keys explanation when it is first introduced * Fix link to keyed lists * Add forgotten key prop --- website/docs/tutorial/index.mdx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/website/docs/tutorial/index.mdx b/website/docs/tutorial/index.mdx index 1bcf30f0bd4..dedd3b450bb 100644 --- a/website/docs/tutorial/index.mdx +++ b/website/docs/tutorial/index.mdx @@ -243,10 +243,14 @@ mapping it to `html!` and collecting it as `Html`: ```rust ,ignore let videos = videos.iter().map(|video| html! { -

{format!("{}: {}", video.speaker, video.title)}

+

{format!("{}: {}", video.speaker, video.title)}

}).collect::(); ``` +:::tip +Keys on list items helps Yew keep track of which items have changed in the list, resulting in faster re-renders. [It is always recommended to use keys in lists](/concepts/html/lists.mdx#keyed-lists). +::: + And finally we need to replace the hardcoded list of videos with the `Html` we created from data: ```rust ,ignore {6-10} @@ -301,7 +305,7 @@ struct VideosListProps { #[function_component(VideosList)] fn videos_list(VideosListProps { videos }: &VideosListProps) -> Html { videos.iter().map(|video| html! { -

{format!("{}: {}", video.speaker, video.title)}

+

{format!("{}: {}", video.speaker, video.title)}

}).collect() } ``` @@ -333,7 +337,7 @@ Now, we can update our `App` component to make use of `VideosList` component. fn app() -> Html { // ... - let videos = videos.iter().map(|video| html! { --

{format!("{}: {}", video.speaker, video.title)}

+-

{format!("{}: {}", video.speaker, video.title)}

- }).collect::(); - html! { @@ -385,8 +389,8 @@ Then we modify the `VideosList` component to pass the "emit" the selected video + }; html! { --

{format!("{}: {}", video.speaker, video.title)}

-+

{format!("{}: {}", video.speaker, video.title)}

+-

{format!("{}: {}", video.speaker, video.title)}

++

{format!("{}: {}", video.speaker, video.title)}

} }).collect() }