use containers

microsoft · Dec 30, 2024 · 499f7ab · 499f7ab
1 parent 19eead8
commit 499f7ab
Showing 1 changed file with 24 additions and 21 deletions.
diff --git a/packages/web/src/Form.tsx b/packages/web/src/Form.tsx
@@ -89,7 +89,8 @@ export default function JSONForm(props: { schema: JSONSchemaObject }) {
     const [formData, setFormData] = useState<PromptParameters>({})
     const [markdown, setMarkdown] = useState<string>("")
 
-    const handleSubmit = () => {
+    const handleSubmit = (e: React.EventHandler) => {
+        e.preventDefault()
         const markdownOutput = Object.entries(formData)
             .map(([key, value]) => `### ${key}\n${value}`)
             .join("\n\n")
@@ -108,26 +109,28 @@ export default function JSONForm(props: { schema: JSONSchemaObject }) {
 
     return (
         <>
-            <VscodeFormContainer>
-                {Object.entries(properties).map(([fieldName, field]) => (
-                    <VscodeFormGroup key={fieldName}>
-                        <VscodeLabel>{fieldName}</VscodeLabel>
-                        <FormField
-                            field={field}
-                            value={formData[fieldName]}
-                            onChange={(value) =>
-                                handleFieldChange(fieldName, value)
-                            }
-                        />
-                        {field?.description && (
-                            <VscodeFormHelper>
-                                {field.description}
-                            </VscodeFormHelper>
-                        )}
-                    </VscodeFormGroup>
-                ))}
-                <VscodeButton onClick={handleSubmit}>Generate Markdown</VscodeButton>
-            </VscodeFormContainer>
+            <form onSubmit={handleSubmit}>
+                <VscodeFormContainer>
+                    {Object.entries(properties).map(([fieldName, field]) => (
+                        <VscodeFormGroup key={fieldName}>
+                            <VscodeLabel>{fieldName}</VscodeLabel>
+                            <FormField
+                                field={field}
+                                value={formData[fieldName]}
+                                onChange={(value) =>
+                                    handleFieldChange(fieldName, value)
+                                }
+                            />
+                            {field?.description && (
+                                <VscodeFormHelper>
+                                    {field.description}
+                                </VscodeFormHelper>
+                            )}
+                        </VscodeFormGroup>
+                    ))}
+                    <VscodeButton type="submit">Generate Markdown</VscodeButton>
+                </VscodeFormContainer>
+            </form>
             <TraceView markdown={markdown} />
         </>
     )