Fix code snippets and improve clarity in use-submissions.mdx

Author: thomasbuilds

src/routes/solid-router/reference/data-apis/use-submissions.mdx

@@ -13,7 +13,8 @@ It's important to note that it requires the form method to be **post** otherwise
 
 In the example below, the `useSubmissions` helper is used to retain a list of all submission results to that action while also giving feedback on the pending state of the current in-flight submission.
 
-```tsx title="component.tsx" {4,9-15, 18}
+```tsx title="component.tsx" {5,10-16, 19}
+import { For, Show } from "solid-js";
 import { useSubmissions } from "@solidjs/router";
 
 function Component() {
@@ -47,7 +48,8 @@ As an optional second parameter, the `useSubmissions` helper can receive a filte
 The filter receives the submitted data as a parameter and should return a boolean value.
 The action below will only submit if the name is "solid".
 
-```tsx title="component.tsx" {4-7}
+```tsx title="component.tsx" {5-8}
+import { For, Show } from "solid-js";
 import { useSubmissions } from "@solidjs/router";
 
 function Component() {
@@ -80,9 +82,8 @@ When the form is submitted, the `submission` object will be updated with the new
 This allows you to provide feedback to the user that the action is in progress.
 Once the action is complete, the `pending` property will be set to `false` and the `result` property will be updated with final value.
 
-```tsx tab title="TypeScript" {6,13-20}
-// component.tsx
-import { Show } from "solid-js";
+```tsx tab title="TypeScript" {5,12-17}
+import { For, Show } from "solid-js";
 import { useSubmissions } from "@solidjs/router";
 
 function Component() {
@@ -93,8 +94,11 @@ function Component() {
       <ul>
         <For each={Array.from(submissions.entries())}>
           {([, data]) => (
-            <Show when={data.input[0].entries().next()} keyed>
-              {(input) => <li>Optimistic: {input().value}</li>}
+            <Show when={data.input[0].entries().next()}>
+              {(input) => {
+                const name = (input().value as [string, string])[1];
+                return <li>Optimistic: {name}</li>;
+              }}
             </Show>
           )}
         </For>
@@ -106,9 +110,8 @@ function Component() {
 }
 ```
 
-```tsx tab title="JavaScript" {6,13-20}
-// component.jsx
-import { Show } from "solid-js";
+```tsx tab title="JavaScript" {5,12-17}
+import { For, Show } from "solid-js";
 import { useSubmissions } from "@solidjs/router";
 
 function Component() {
@@ -119,8 +122,11 @@ function Component() {
       <ul>
         <For each={Array.from(submissions.entries())}>
           {([, data]) => (
-            <Show when={data.input[0].entries().next()} keyed>
-              {(input) => <li>Optimistic: {input().value[1]}</li>}
+            <Show when={data.input[0].entries().next()}>
+              {(input) => {
+                const name = input().value[1];
+                return <li>Optimistic: {name}</li>;
+              }}
             </Show>
           )}
         </For>
@@ -140,7 +146,7 @@ This allows you to provide feedback to the user that the action has failed. Addi
 At this stage, you can also use the `retry()` method to attempt the action again or the `clear()` to wipe the filled data in the platform.
 
 ```tsx title="component.tsx" {12-18}
-import { Show } from "solid-js";
+import { For, Show } from "solid-js";
 import { useSubmissions } from "@solidjs/router";
 
 function Component() {