React "children" should not be passed as prop ?

[nimo23]

According to the example in https://tanstack.com/form/latest/docs/framework/react/examples/simple, we can do something like this:

..
children={(field) => {
              // Avoid hasty abstractions. Render props are great!
              return (
                <>
                  <label htmlFor={field.name}>First Name:</label>
                  <input
                    id={field.name}
                    name={field.name}
                    value={field.state.value}
                    onBlur={field.handleBlur}
                    onChange={(e) => field.handleChange(e.target.value)}
                  />
                  <FieldInfo field={field} />
                </>
              )
            }}

TanStack Forms says:
Avoid hasty abstractions. Render props are great!"

but Sonar says:

React "children" should not be passed as prop
(see https://rules.sonarsource.com/typescript/tag/react/RSPEC-6748/)

Which recommendation should I trust now? Is there an alternative way in TanStackForm like React Hook Form to avoid violating this rule?

[crutchcorn]

You can pass the function as a child:

<form.Field>{()=>{}}</form.Field>

But it's fine either way. It won't break anything if you use our suggested syntax