[Question] Render props pattern

[binajmen]

I'm trying to apply some kind or render props pattern around modular-forms, without success :/

The general idea is: I have many kind of criteria, the only difference is the params. all the other fields are the same. To avoid repetition (I might end up with 10+ forms with the same logic except for params), I was trying to extract the common part of the form, so every pages for every criteria only have to specify the params part. Something like this:

      <CriterionForm<typeof paramsSchema> paramsSchema={paramsSchema}>
        {(form, Field) => (
          <Field name="params">
            {(field, props) => (
              <Params
                value={field.value}
                onChange={(value: ParamValue) =>
                  setValue(form, field.name, value)
                }
              />
            )}
          </Field>
        )}
      </CriterionForm>

I'm "nearly" there, but not there neither (TS mess) 🙈

Is there a TS wizard to help me here? 🙏

https://stackblitz.com/edit/modular-forms-render-props?file=src%2FApp.tsx,src%2F_form.tsx

(I asked the question on Discord but I'm afraid it will get lost rapidly)

[fabian-hiller]

Have you been able to resolve this issue or should I take a look at it?

[binajmen]

I changed my approach as I was not able to solve this the way I wanted.
Don't spend too much time on this — especially if you're in the process of a rewrite, unless you think this is a valid use case.
Feel free to close the ticket depending on your decision ;)