Children props, ESLint and Typescript

[sazzer]

I've just started looking at this library, and it looks good so far. However, as soon as I've tried to use it I've run into some issues.

Copying the exact style from the docs - having a children attribute on the form.Field tag - brings up an ESLint error. Specifically react/no-children-prop. I did find a previous discussion about exactly this, and one of the things suggested was to put the render prop as a child of the element instead. So that is, instead of this:

<form.Field
  name="firstName"
  children={(field) => (
    <>
      <input
        value={field.state.value}
        onBlur={field.handleBlur}
        onChange={(e) => field.handleChange(e.target.value)}
      />
      <FieldInfo field={field} />
    </>
  )}
/>

writing this:

<form.Field
  name="firstName">
{(field) => (
    <>
      <input
        value={field.state.value}
        onBlur={field.handleBlur}
        onChange={(e) => field.handleChange(e.target.value)}
      />
      <FieldInfo field={field} />
    </>
  )}
</form.Field>

However, if I do that then I instead get a TypeScript error of:

This JSX tag's 'children' prop expects a single child of type '(fieldApi: FieldApi<{ username: string | undefined; name: string | undefined; email: string | undefined; avatar: string | undefined; }, "username", string | undefined, FieldValidateOrFn<{ username: string | undefined; name: string | undefined; email: string | undefined; avatar: string | undefined; }, "username", str...', but multiple children were provided.ts(2746)

Other than going back to the attribute form and changing my ESLint config - which I'm loathe to do if I can avoid it - are there any other good solutions to this?

Cheers

[theVedanta]

Can you share a stackblitz, please? I am trying to reproduce this error but it's working fine for me. Also the error mentions username, name, email, and avatar. Could the error be because you're passing firstName to the field in <form.Field name="firstName">?

Would appreciate more context!

[sazzer]

Ok - I'm calling user error. Sorry!

I just tried to recreate it on StackBlitz. And couldn't get the TS error to happen. So I've gone back to my own code, and also can't get it to error there now! Even though I'm convinced I was doing exactly the same in both cases...

[theVedanta]

Haha no problem!
Let me know if it pops up again and we can figure out what's up.

[darklight9811]

This is also an issue with biome, I really would love if instead of children, it was named render, because I also think that children as function looks kinda non-intuitive.

[LeCarbonator]

Keep in mind that these are equivalent React syntax:

<form.Field name="firstName">
   {(field) => (<FieldInfo field={field} />)}
</form.Field>

<form.Field 
   name="firstName"
   children={(field) => (<FieldInfo field={field} />)}
/>

Or what you probably know it as:

<A>
  <B/>
</A>

<A children={<B/>} />

It's not Tanstack Form naming the property children, it's React implementing nested components as syntactic sugar for children.