[React] Reset doesn't work with raw input

[muhajirdev]

export function Sampleform() {
  // Use login form
  const [loginForm, { Form, Field }] = useForm<LoginForm>();

  return (
    <Form
      className="space-y-12 md:space-y-14 lg:space-y-16"
      onSubmit={(values) => console.log(values)}
    >
      <Field name="email">
        {(field, props) => <input className="border" {...props} type="email" />}
      </Field>
      <Field name="email">
        {(field, props) => (
          <TextInput
            {...props}
            value={field.value}
            error={field.error}
            type="email"
            label="Email"
            placeholder="[email protected]"
            required
          />
        )}
      </Field>
      <Field name="password">
        {(field, props) => (
          <input {...props} className="border" type="password" />
        )}
      </Field>
      <button onClick={() => reset(loginForm)}>reset</button>
    </Form>
  );
}

This

        {(field, props) => <input className="border" {...props} type="email" />}

Doesn't work

But TextInput does. The code is from react playground https://stackblitz.com/edit/modular-forms-react-qqpshg?file=src/routes/login.tsx,src/components/TextInput.tsx

[muhajirdev]

Originally I was trying to work with ArrayFields, trying to insert. But found out that the library doesn't work well with react.

I think there should be "Gotchas" documented in the docs

[fabian-hiller]

What exactly does not work with React? I think this is fixed. I think the problem is that your field is not controlled: https://modularforms.dev/react/guides/controlled-fields

[muhajirdev]

Ahh, i see, thank you @fabian-hiller

Then I think it would be nice if it's mentioned here https://modularforms.dev/react/guides/add-fields-to-form

[muhajirdev]

      <FieldArray name="test">
        {(fieldArray) => (
          <div>
            {fieldArray.items.value.map((item, index) => {
              return (
                <div key={item}>
                  <Field name={`test.${index}`}>
                    {(field, props) => (
                      <div>
                        <Input {...props} value={field.value.value} />
                        {field.error && <FieldError>{field.error}</FieldError>}
                      </div>
                    )}
                  </Field>
                </div>
              );
            })}
            <Button
              type="button"
              onClick={() => insert(profileForm, "test", { value: "aa" })}
            >
              Add item
            </Button>
          </div>
        )}
      </FieldArray>

This also seems to be not reactive, how do I make it reactive. It does nothing when I insert

[fabian-hiller]

I need a minimal StackBlitz reproduction. Feel free to use our template. There is also a field array example included: https://stackblitz.com/edit/modular-forms-react?file=src%2Froutes%2Ftodos.tsx