breaking(renderer): FieldProvider use Component instead of component

Author: rvsia

packages/react-form-renderer/src/files/field-provider.js

@@ -3,22 +3,21 @@ import PropTypes from 'prop-types';
 
 import useFieldApi from '../files/use-field-api';
 
-const FieldProvider = ({ component, render, ...props }) => {
+const FieldProvider = ({ Component, render, ...props }) => {
   const fieldProviderProps = useFieldApi(props);
-  if (component) {
-    const FieldComponent = component;
-    return <FieldComponent {...fieldProviderProps} />;
+  if (Component) {
+    return <Component {...fieldProviderProps} />;
   }
 
   if (render) {
     return render({ ...fieldProviderProps });
   }
 
-  throw new Error('Field provider is missing either component or render prop.');
+  throw new Error('Field provider is missing either Component or render prop.');
 };
 
 FieldProvider.propTypes = {
-  component: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func]),
+  Component: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func]),
   render: PropTypes.func
 };
 

packages/react-form-renderer/src/tests/form-renderer/__snapshots__/render-form.test.js.snap

@@ -40,7 +40,8 @@ exports[`renderForm function #condition should render condition field only if co
             name="a"
           >
             <FieldProvider
-              component={[Function]}
+              Component={[Function]}
+              component="custom-component"
               name="a"
             >
               <TextField
@@ -105,7 +106,8 @@ exports[`renderForm function #condition should render condition field only if co
             name="c"
           >
             <FieldProvider
-              component={[Function]}
+              Component={[Function]}
+              component="custom-component"
               name="c"
             >
               <TextField
@@ -259,7 +261,8 @@ exports[`renderForm function #condition should render condition field only if on
             name="a"
           >
             <FieldProvider
-              component={[Function]}
+              Component={[Function]}
+              component="custom-component"
               name="a"
             >
               <TextField
@@ -324,7 +327,8 @@ exports[`renderForm function #condition should render condition field only if on
             name="b"
           >
             <FieldProvider
-              component={[Function]}
+              Component={[Function]}
+              component="custom-component"
               name="b"
             >
               <TextField
@@ -513,7 +517,8 @@ exports[`renderForm function should render single field from with custom compone
             name="foo"
           >
             <FieldProvider
-              component={[Function]}
+              Component={[Function]}
+              component="custom-component"
               name="foo"
             >
               <TextField

packages/react-form-renderer/src/tests/form-renderer/render-form.test.js

@@ -44,7 +44,7 @@ describe('renderForm function', () => {
 
   beforeEach(() => {
     const TextField = ({ input }) => <input {...input} id={input.name} />;
-    CustomComponent = ({ dataType, formOptions, ...props }) => <FieldProvider {...props} component={TextField} />;
+    CustomComponent = ({ dataType, formOptions, ...props }) => <FieldProvider {...props} Component={TextField} />;
   });
 
   it('should render single field from defined componentTypes', () => {

packages/react-renderer-demo/src/app/pages/renderer/component-mapping.md

@@ -56,13 +56,13 @@ const { input, isDisabled, label, helperText, description, meta } = useFieldApi(
 
 ### FieldProvider
 
-Or you can import `FieldProvider` component from Data Driven Forms. This component needs to obtain `render` or `component` prop.
+Or you can import `FieldProvider` component from Data Driven Forms. This component needs to obtain `render` or `Component` prop.
 
 
 ```jsx
 import { FieldProvider } from '@data-driven-forms/react-form-renderer'
 
-<FielProvider component={TextField}>
+<FielProvider Component={TextField}>
 
 // or