update

Author: LadyBluenotes

src/routes/reference/component-apis/children.mdx

@@ -56,8 +56,6 @@ The accessor also exposes `toArray()`.
 ### Basic usage
 
 ```tsx
-import { children } from "solid-js";
-
 function Wrapper(props) {
 	const resolved = children(() => props.children);
 
@@ -68,13 +66,20 @@ function Wrapper(props) {
 		</div>
 	);
 }
+
+function Example() {
+	return (
+		<Wrapper>
+			<span>First</span>
+			<span>Second</span>
+		</Wrapper>
+	);
+}
 ```
 
 ### Flatten children into an array
 
 ```tsx
-import { children } from "solid-js";
-
 function List(props) {
 	const resolved = children(() => props.children);
 
@@ -86,6 +91,15 @@ function List(props) {
 		</ul>
 	);
 }
+
+function Example() {
+	return (
+		<List>
+			<span>Alpha</span>
+			<span>Beta</span>
+		</List>
+	);
+}
 ```
 
 ## Related

src/routes/reference/components/create-dynamic.mdx

@@ -62,11 +62,21 @@ Returns the rendered component or element.
 ## Example
 
 ```tsx
-import { createDynamic } from "solid-js/web";
+const views = {
+	red: () => <p style={{ color: "red" }}>Red</p>,
+	blue: () => <p style={{ color: "blue" }}>Blue</p>,
+};
+
+const [selected, setSelected] = createSignal<keyof typeof views>("red");
+
+	return (
+		<>
+			<button onClick={() => setSelected("red")}>Red</button>
+			<button onClick={() => setSelected("blue")}>Blue</button>
 
-function Example(props) {
-	return createDynamic(() => props.as, { type: "button", children: "Save" });
-}
+			<Dynamic component={views[selected()]} />
+		</>
+	);
 ```
 
 ## Related

src/routes/reference/components/dynamic.mdx

@@ -66,11 +66,21 @@ Returns the rendered component or element.
 ## Example
 
 ```tsx
-import { Dynamic } from "solid-js/web";
+const views = {
+	red: () => <p style={{ color: "red" }}>Red</p>,
+	blue: () => <p style={{ color: "blue" }}>Blue</p>,
+};
+
+const [selected, setSelected] = createSignal<keyof typeof views>("red");
+
+	return (
+		<>
+			<button onClick={() => setSelected("red")}>Red</button>
+			<button onClick={() => setSelected("blue")}>Blue</button>
 
-function Example(props) {
-	return <Dynamic component={props.as} type="button" children="Save" />;
-}
+			<Dynamic component={views[selected()]} />
+		</>
+	);
 ```
 
 ## Related

src/routes/reference/components/error-boundary.mdx

@@ -64,8 +64,6 @@ Returns the rendered children or fallback content.
 ### Basic usage
 
 ```tsx
-import { ErrorBoundary } from "solid-js";
-
 <ErrorBoundary
 	fallback={(error, reset) => (
 		<div>

src/routes/reference/components/for.mdx

@@ -73,18 +73,22 @@ Child function. It receives the current item and an index accessor.
 ### Basic usage
 
 ```tsx
-<For each={items()} fallback={<div>No items</div>}>
+const items = ["A", "B", "C"];
+
+<For each={items} fallback={<div>No items</div>}>
 	{(item) => <div>{item}</div>}
 </For>;
 ```
 
 ### Access the index
 
 ```tsx
-<For each={items()}>
+const items = ["A", "B", "C"];
+
+<For each={items}>
 	{(item, index) => (
 		<div>
-			#{index()} {item}
+			#{index} {item}
 		</div>
 	)}
 </For>;

src/routes/reference/components/index-component.mdx

@@ -1,14 +1,13 @@
 ---
 title: <Index>
 use_cases: >-
-  primitive arrays, non-keyed lists, index-based rendering, static positions,
+  non-keyed lists, index-based rendering, fixed positions, changing values,
   simple lists
 tags:
   - lists
   - iteration
   - components
   - arrays
-  - primitives
   - index
 version: "1.0"
 description: >-
@@ -48,7 +47,7 @@ Source list.
 
 - **Type:** `JSX.Element`
 
-Content rendered when `each` is empty or falsy.
+Content rendered when `each` is an empty array, `undefined`, `null`, or `false`.
 
 ### `children`
 
@@ -66,26 +65,27 @@ Child function. It receives an accessor for the item at that index and the index
 - The `item` argument is an accessor.
 - The `index` argument is a number.
 - Updating a value at the same index updates the corresponding rendered item.
+- When the array is reordered, rendered positions stay tied to indexes, and `item()` updates to the current value at that index.
 - `<Index>` uses [`indexArray`](/reference/reactive-utilities/index-array) internally.
 
 ## Examples
 
 ### Basic usage
 
 ```tsx
-import { Index } from "solid-js";
+const items = ["A", "B", "C"];
 
-<Index each={state.list} fallback={<div>No items</div>}>
+<Index each={items} fallback={<div>No items</div>}>
 	{(item) => <div>{item()}</div>}
 </Index>;
 ```
 
 ### Access the index
 
 ```tsx
-import { Index } from "solid-js";
+const items = ["A", "B", "C"];
 
-<Index each={state.list}>
+<Index each={items}>
 	{(item, index) => (
 		<div>
 			#{index} {item()}