form.Field children prop: Render props pattern with children as a function

[arnaudbzn]

The render props pattern offers great flexibility.
But in the docs and examples using the children prop in the Field component is a bit unusual (though it makes sense for a renderComponent prop).

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

It's may be more intuitive to use this syntax for the children:

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

Remix uses this approach with the Await component

The feature and implementation are the same, it's just a suggestion for the documentation and examples.

[crutchcorn]

I broadly agree FWIW, and is how I did docs as part of HouseForm (the previous form library I built).

[bzbetty]

would the following syntax be an option?

   {form.field({
       name: ''
       children: () => {}
   })

[crutchcorn]

While this syntax is something we'll likely be using for future adapters, it's not feasible to use this syntax for our React adapter thanks to performance concerns:

https://unicorn-utterances.com/posts/functions-are-killing-react-performance

[mmospanenko]

how to be with ESLint react/no-children-prop rule?

[dca123]

how to be with ESLint react/no-children-prop rule?

You can add this to your eslintrc.

	"rules": {
		"react/no-children-prop": [
			true,
			{
				"allowFunctions": true
			}
		]
	}

Alternatively you can do

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

[JPGarCar]

I might not have seen this on the docs, but if it isn't, then it should be. Thank you for the tip!

[martin-dimi]

Is the expectation to still ignore that ESlint rule? @crutchcorn

[LeCarbonator]

If you have the ESLint rule enabled, you can just use the other way to write children in React:

<A>
  <B />
</A>

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

<A>
  {() => <C />}
</A>

<A children={() => <C />}/>