From fdccc3e701ab94737cd90f1017810879536493df Mon Sep 17 00:00:00 2001
From: Hongbo Wu <hongbo@omnivore.app>
Date: Thu, 2 Jun 2022 21:34:17 +0800
Subject: [PATCH] Make inputs as state

---
 packages/web/components/patterns/FormModal.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/web/components/patterns/FormModal.tsx b/packages/web/components/patterns/FormModal.tsx
index 86a968184..55592319d 100644
--- a/packages/web/components/patterns/FormModal.tsx
+++ b/packages/web/components/patterns/FormModal.tsx
@@ -6,6 +6,7 @@ import {
 import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
 import { Button } from '../elements/Button'
 import { StyledText } from '../elements/StyledText'
+import { useState } from 'react'
 
 export interface FormInputProps {
   name: string
@@ -28,6 +29,8 @@ export interface FormModalProps {
 }
 
 export function FormModal(props: FormModalProps): JSX.Element {
+  const [inputs, setInputs] = useState<FormInputProps[]>(props.inputs || [])
+
   return (
     <ModalRoot defaultOpen onOpenChange={props.onOpenChange}>
       <ModalOverlay />
@@ -42,7 +45,7 @@ export function FormModal(props: FormModalProps): JSX.Element {
                 props.onOpenChange(false)
               }}
             >
-              {props.inputs?.map((input) => (
+              {inputs.map((input, index) => (
                 <HStack key={input.name}>
                   <StyledText>{input.label}</StyledText>
                   <input
@@ -51,10 +54,13 @@ export function FormModal(props: FormModalProps): JSX.Element {
                     value={input.value}
                     placeholder={input.placeholder}
                     onChange={(event) => {
-                      input.onChange &&
+                      if (input.onChange) {
+                        inputs[index].value = event.target.value
+                        setInputs(inputs)
                         input.onChange(
                           event.target.value || event.target.checked
                         )
+                      }
                     }}
                     disabled={input.disabled}
                     hidden={input.hidden}