Pass render prop in Field

[maciejmyslinski]

Are you submitting a bug report or a feature request?

bug report and documentation improvement request

What is the current behavior?

I have a component that uses render prop.
Let's take an example:

const CustomSelect = ({ input, meta, render, children, ...restProps }) => (
  <select {...input} {...restProps}>{render && render()}</select>
);

I want to be able to use it with Field component like that:

const countries = [
  <option key="placeholder" value="placeholder" disabled>
    Select your country
  </option>,
  <option key="de" value="de">
    Germany
  </option>
];

<Field
  name="country"
  component={CustomSelect}
  render={() => countries}
/>

With current Field implementation, render prop will not be passed down to my CustomSelect component. However children prop would be passed. Consequently, we're not able to use form components that use render prop (this is such an awesome pattern, isn't it?).

The other problem is that this is inconsistent behavior because both render and children props are part of Field API. One of them is being passed down, the other is not.

What is the expected behavior?

Both children and render props should be passed down if component is used.
Also, the documentation should explain an order in which component, render, and children are used for rendering as well as what happens when you use more than one of them at the same time.

Sandbox Link

What's your environment?

package	version
React Final Form	1.1.1
Final Form	1.2.1

[erikras]

It's unclear to me why this is better than just passing the <option/>s as children? Can you explain why a function is superior?

[maciejmyslinski]

It's just a simple example. In reality, you could have a component with a much higher level of complexity that uses render prop pattern to handle it.

Or even worse, you could use external component from some library that uses render prop pattern.

[maciejmyslinski]

Thanks for merging! 🎉
Do you feel like README.md needs some update too? 🤔

[erikras]

Do you feel like README.md needs some update too?

Yes!

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.