Proxy almost there.

.gitignore

@@ -0,0 +1,3 @@
+*.pyc
+.coverage
+node_modules

components/Form.tsx

@@ -13,7 +13,8 @@ interface Props {
 }
 
 export const Form = (props: Props) => {
-    return <div>
+    return <form method="GET" action="">
         {props.form.map(field => <Widget key={field.widget.name} widget={field.widget} />)}
-    </div>;
+        <button type="submit">Submit</button>
+    </form>;
 };

components/Widget.tsx

@@ -18,12 +18,15 @@ interface TextInput extends BaseWidget {
 
 type Optgroup = [
     null,
-    {
-        name: string;
-        value: string|number|boolean|null;
-        label: string;
-        selected: boolean;
-    },
+    [
+        {
+            name: string;
+            // value: string|number|boolean|null;
+            value: string|number|null;
+            label: string;
+            selected: boolean;
+        }
+    ],
     number
 ]
 
@@ -58,13 +61,22 @@ export const Widget = (props: Props) => {
 
     switch (widget.template_name) {
         case "django/forms/widgets/select.html": {
+            /*
             if (isMultiple(widget)) {
                 return <div>I am a select multiple</div>;
             }
-            return <div>I am a select single</div>;
+            */
+            // return <div>I am a select single</div>;
+            const value = isMultiple(widget) ? widget.value : (widget.value[0] || '');
+            return <select name={widget.name} multiple={isMultiple(widget)} defaultValue={value}>
+                {widget.optgroups.map((optgroup, index) => 
+                <option key={index} value={optgroup[1][0].value || []}>{optgroup[1][0].label}</option>
+                )}
+            </select>;
         }
         case "django/forms/widgets/text.html": {
-            return <div>I am a text</div>;
+            return <input defaultValue={widget.value || ""} name={widget.name} />;
+            // return <div>I am a text</div>;
         }
         default: {
             const _exhaustiveCheck: never = widget;

index.tsx

@@ -2,11 +2,20 @@ import React from 'react';
 import axios from 'axios';
 import express from 'express';
 import ReactDOMServer from 'react-dom/server';
+import proxy from 'http-proxy-middleware';
 
 const app = express();
 
+const ssrProxy = proxy({target: 'http://localhost:8000/', changeOrigin: true})
+
+app.use('/', ssrProxy);
+
+/*
 app.get('/', async (req, res) => {
-    const response = await axios.get('http://localhost:8000/form/');
+    const config = {
+        params: req.query,
+    };
+    const response = await axios.get('http://localhost:8000/form/', config);
 
     if (req.query.raw) {
         res.send(response.data);
@@ -19,5 +28,6 @@ app.get('/', async (req, res) => {
     }
 
 });
+*/
 
 app.listen(3000, () => console.log('Example app listening on port 3000!'));