Repository: final-form/react-final-form (js)

Issue:
Pass render prop in Field
<!--

👋 Hey, thanks for taking an interest in 🏁 React Final Form!

-->

### Are you submitting a **bug report** or a **feature request**?
bug report and documentation improvement request
<!-- For support request, please use Stack Overflow instead. This issue tracker is reserved for bugs and features. -->

### What is the current behavior?
I have a component that uses render prop.
Let's take an example:
```js
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:
```js
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.

<!-- If this is a bug, please include steps to reproduce and a minimal demo of the problem using Sandbox, Plunkr, WebpackBin or JSFiddle. -->

### 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
[![Edit lxnxzr3l19](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/lxnxzr3l19)
<!-- Problems are much easier to understand and debug if they can be demonstrated in a minimal environment.  -->

### What's your environment?

<!-- Include 🏁 React Final Form version, 🏁 Final Form version, OS/browser affected, Node version, etc. -->
package | version
---------|---------
React Final Form | 1.1.1
Final Form | 1.2.1

Pull request:
Pass render prop when component is used
<!--

👋 Hey, thanks for your interest in contributing to 🏁 React Final Form!

**Please ask first before starting work on any significant new features.**

It's never a fun experience to have your pull request declined after investing a
lot of time and effort into a new feature. To avoid this from happening, we
request that contributors create an issue to first discuss any significant new
features.

Please try to keep your pull request focused in scope and avoid including
unrelated commits.

After you have submitted your pull request, we’ll try to get back to you as soon
as possible. We may suggest some changes or improvements.

Please format the code before submitting your pull request by running:

```
npm run precommit
```

https://github.com/final-form/react-final-form/blob/master/.github/CONTRIBUTING.md

-->

Fixes #54.

Patch:
diff --git a/src/renderComponent.js b/src/renderComponent.js
index a344614..94cd2c0 100644
--- a/src/renderComponent.js
+++ b/src/renderComponent.js
@@ -11,7 +11,7 @@ export default function renderComponent<T>(
 ): React.Node {
   const { render, children, component, ...rest } = props
   if (component) {
-    return React.createElement(component, { ...rest, children }) // inject children back in
+    return React.createElement(component, { ...rest, children, render })
   }
   if (render) {
     return render({ ...rest, children }) // inject children back in


Test patch:
diff --git a/src/renderComponent.test.js b/src/renderComponent.test.js
new file mode 100644
index 0000000..44d30b1
--- /dev/null
+++ b/src/renderComponent.test.js
@@ -0,0 +1,16 @@
+import renderComponent from './renderComponent'
+
+describe('renderComponent', () => {
+  it('should pass both render and children prop', () => {
+    const children = 'some children'
+    const render = () => 'examplary render function'
+    const props = {
+      component: () => null,
+      children,
+      render
+    }
+    const name = 'TestComponent'
+    const result = renderComponent(props, name)
+    expect(result.props).toEqual({ children, render })
+  })
+})