diff --git a/examples/nested_list/src/app.rs b/examples/nested_list/src/app.rs
index 6c62b7d1c44..eacbccdd2f2 100644
--- a/examples/nested_list/src/app.rs
+++ b/examples/nested_list/src/app.rs
@@ -1,3 +1,5 @@
+use std::iter;
+
 use yew::prelude::*;
 
 use super::header::ListHeader;
@@ -48,23 +50,48 @@ impl Component for App {
 
         // note the use of `html_nested!` instead of `html!`.
         let letters = ('A'..='C')
-            .map(|letter| html_nested! { <ListItem name={letter.to_string()} {on_hover} /> });
+            .map(|letter| html_nested! { <ListItem key={format!("letter-{}", letter)} name={letter.to_string()} {on_hover} /> });
 
         html! {
             <div class="main" {onmouseover}>
                 <h1>{ "Nested List Demo" }</h1>
-                <List {on_hover} weak_link={list_link}>
-                    <ListHeader text="Calling all Rusties!" {on_hover} {list_link} />
-                    <ListItem name="Rustin" {on_hover} />
-                    <ListItem hide=true name="Rustaroo" {on_hover} />
-                    <ListItem name="Rustifer" {on_hover}>
-                        <div class="sublist" onmouseover={onmouseoversublist}>{ "Sublist!" }</div>
-                        <List {on_hover} weak_link={sub_list_link}>
-                            <ListHeader text="Sub Rusties!" {on_hover} list_link={sub_list_link}/>
-                            <ListItem hide=true name="Hidden Sub" {on_hover} />
-                            { for letters }
-                        </List>
-                    </ListItem>
+                <List
+                    {on_hover}
+                    weak_link={list_link}
+                    header={
+                        vec![
+                            html_nested! {
+                                <ListHeader text="Calling all Rusties!" {on_hover} {list_link} key="header" />
+                            }
+                        ]
+                    }
+                >
+                    {vec![
+                        html_nested! { <ListItem key="rustin" name="Rustin" {on_hover} /> },
+                        html_nested! { <ListItem key="rustaroo" hide=true name="Rustaroo" {on_hover} /> },
+                        html_nested! {
+                            <ListItem key="rustifer" name="Rustifer" {on_hover}>
+                                <div class="sublist" onmouseover={onmouseoversublist}>{ "Sublist!" }</div>
+                                <List
+                                    {on_hover}
+                                    weak_link={sub_list_link}
+                                    header={
+                                        vec![html_nested! {
+                                            <ListHeader key="sub-rusties" text="Sub Rusties!" {on_hover} list_link={sub_list_link}/>
+                                        }]
+                                    }
+                                >
+                                    {
+                                        iter::once(html_nested! { <ListItem key="hidden-sub" hide=true name="Hidden Sub" {on_hover} /> })
+                                        .chain(letters)
+                                        .collect::<Vec<_>>()
+                                    }
+                                </List>
+                            </ListItem>
+                        },
+                    ]}
+
+
                 </List>
                 { self.view_last_hovered() }
             </div>
diff --git a/examples/nested_list/src/list.rs b/examples/nested_list/src/list.rs
index 53c2101945e..46570610a96 100644
--- a/examples/nested_list/src/list.rs
+++ b/examples/nested_list/src/list.rs
@@ -1,64 +1,23 @@
 use std::rc::Rc;
 
-use yew::html::ChildrenRenderer;
 use yew::prelude::*;
-use yew::virtual_dom::{VChild, VComp};
+use yew::virtual_dom::VChild;
 
-use crate::header::{ListHeader, Props as HeaderProps};
-use crate::item::{ListItem, Props as ItemProps};
+use crate::header::ListHeader;
+use crate::item::ListItem;
 use crate::{Hovered, WeakComponentLink};
 
-#[derive(Clone, PartialEq)]
-pub enum Variants {
-    Item(Rc<<ListItem as Component>::Properties>),
-    Header(Rc<<ListHeader as Component>::Properties>),
-}
-
-impl From<ItemProps> for Variants {
-    fn from(props: ItemProps) -> Self {
-        Variants::Item(Rc::new(props))
-    }
-}
-
-impl From<HeaderProps> for Variants {
-    fn from(props: HeaderProps) -> Self {
-        Variants::Header(Rc::new(props))
-    }
-}
-
-#[derive(PartialEq, Clone)]
-pub struct ListVariant {
-    props: Variants,
-}
-
-impl<CHILD> From<VChild<CHILD>> for ListVariant
-where
-    CHILD: Component,
-    CHILD::Properties: Into<Variants> + Clone,
-{
-    fn from(vchild: VChild<CHILD>) -> Self {
-        Self {
-            props: (*vchild.props).clone().into(),
-        }
-    }
-}
-
-impl From<ListVariant> for Html {
-    fn from(variant: ListVariant) -> Html {
-        match variant.props {
-            Variants::Header(props) => VComp::new::<ListHeader>(props, None).into(),
-            Variants::Item(props) => VComp::new::<ListItem>(props, None).into(),
-        }
-    }
-}
-
 pub enum Msg {
     HeaderClick,
 }
 
 #[derive(Clone, PartialEq, Properties)]
 pub struct Props {
-    pub children: ChildrenRenderer<ListVariant>,
+    #[prop_or_default]
+    pub header: Vec<VChild<ListHeader>>,
+    #[prop_or_default]
+    pub children: Vec<VChild<ListItem>>,
+
     pub on_hover: Callback<Hovered>,
     pub weak_link: WeakComponentLink<List>,
 }
@@ -97,9 +56,9 @@ impl Component for List {
         html! {
             <div class="list-container" {onmouseover}>
                 <div class={classes!("list", inactive)}>
-                    { Self::view_header(&ctx.props().children) }
+                    { ctx.props().header.clone() }
                     <div class="items">
-                        { Self::view_items(&ctx.props().children) }
+                        { Self::view_items(ctx.props().children.clone()) }
                     </div>
                 </div>
             </div>
@@ -108,21 +67,15 @@ impl Component for List {
 }
 
 impl List {
-    fn view_header(children: &ChildrenRenderer<ListVariant>) -> Html {
-        html! { for children.iter().filter(|c| matches!(c.props, Variants::Header(_))) }
-    }
-
-    fn view_items(children: &ChildrenRenderer<ListVariant>) -> Html {
+    fn view_items(children: Vec<VChild<ListItem>>) -> Html {
         children
-            .iter()
-            .filter(|c| matches!(&c.props, Variants::Item(props) if !props.hide))
+            .into_iter()
+            .filter(|c| !c.props.hide)
             .enumerate()
             .map(|(i, mut c)| {
-                if let Variants::Item(props) = c.props {
-                    let mut props = (*props).clone();
-                    props.name = format!("#{} - {}", i + 1, props.name);
-                    c.props = Variants::Item(Rc::new(props));
-                }
+                let mut props = (*c.props).clone();
+                props.name = format!("#{} - {}", i + 1, props.name);
+                c.props = Rc::new(props);
                 c
             })
             .collect::<Html>()