Cleanup

src/components/Form.js

@@ -229,15 +229,20 @@ function Form(_props) {
   };
   const setErrors = useCallback((errorsMap) => {
     setState((state) => {
-      const newErrors = Object.keys(fields.current).reduce((acc, name) => {
-        if (typeof errorsMap[name] === "string") {
-          return setPath(acc, name, [errorsMap[name]]);
-        }
-        if (Array.isArray(errorsMap[name])) {
-          return setPath(acc, name, errorsMap[name]);
-        }
-        return acc;
-      }, {...state.errors});
+      const newErrors = Object.keys(fields.current).reduce(
+        (acc, name) => {
+          if (typeof errorsMap[name] === "string") {
+            return setPath(acc, name, [errorsMap[name]]);
+          }
+
+          if (Array.isArray(errorsMap[name])) {
+            return setPath(acc, name, errorsMap[name]);
+          }
+
+          return acc;
+        },
+        { ...state.errors }
+      );
 
       return {
         ...state,
@@ -246,13 +251,11 @@ function Form(_props) {
     });
   }, []);
   const resetForm = ({ values, errors } = {}) => {
-    setState({
+    setState((state) => ({
+      ...state,
       values: values ?? initialValues,
       errors: errors ?? initialErrors ?? {},
-      shouldValidateOnChange: false,
-      namesToValidate: null,
-      submitStatus: "READY",
-    });
+    }));
   };
   const responsiveFormCSS = useResponsivePropsCSS(props, DEFAULT_PROPS, {
     width: responsiveSize("width"),

website/src/pages/components/form/index.js

@@ -136,7 +136,7 @@ function FormPage() {
       return (
         <Container padding="8">
           <Form initialValues={initialValues} onSubmit={onSubmit}>
-            <Grid rowsGap="8">
+            <Stack gap="8">
               <Text as="h2" textStyle="heading4">About you</Text>
               <Input name="name" label="Name" />
               <Select name="relationshipStatus" label="Relationship status" options={relationshipStatusOptions} />
@@ -148,7 +148,7 @@ function FormPage() {
               <TimeSpan name="age" label="Age" />
               <Textarea name="aboutYourself" label="Tell us about yourself" height="100" />
               <Button type="submit">Submit</Button>
-            </Grid>
+            </Stack>
           </Form>
         </Container>
       );