search

bietkul / react-reactive-form

Angular like reactive forms in React.
MIT License
309 stars 32 forks source link

Cannot call a class as a function #40

Closed aturan23 closed 5 years ago

aturan23 commented 5 years ago

Describe the bug When I use FormGenerator with a material-ui react-autosuggest, an error occurs.

To Reproduce Steps to reproduce the behavior:

  1. index.js export { default as AutocomplateField } from './AutocomplateField';
  2. Component import {AutocomplateField } from 'app/field-components';
  3. on my imported component: 
    const fieldConfig = {
controls: {
    autosuggestion: {
        render: AutocomplateField,
        meta : {
            label: "some"
        }
    }
}
};
  4. usage: <FormGenerator fieldConfig={fieldConfig} />

Desktop (please complete the following information):

Error context

The above error occurred in the <Field> component:
    in Field (created by FieldControl)
    in FieldControl (created by Field)
    in Field (created by FieldGroup)
    in FieldGroup (created by FormGenerator)
    in FormGenerator (at ClientDialog.js:106)
    in div (created by DialogContent)
    in DialogContent (created by WithStyles(DialogContent))
    in WithStyles(DialogContent) (at ClientDialog.js:105)
    in div (created by Paper)
    in Paper (created by WithStyles(Paper))
    in WithStyles(Paper) (created by Dialog)
    in div (created by Dialog)
    in Transition (created by Slide)
    in EventListener (created by Slide)
    in Slide (created by WithTheme(Slide))
    in WithTheme(Slide) (at ClientDialog.js:11)
    in Transition (created by Dialog)
    in RootRef (created by Modal)
    in div (created by Modal)
    in Portal (created by Modal)
    in Modal (created by WithStyles(Modal))
    in WithStyles(Modal) (created by Dialog)
    in Dialog (created by WithStyles(Dialog))
    in WithStyles(Dialog) (at ClientDialog.js:95)
    in ClientDialog (created by Context.Consumer)
    in Connect(ClientDialog) (at ClientsHeader.js:56)
    in div (at ClientsHeader.js:13)
    in ClientsHeader (created by Context.Consumer)
    in Connect(ClientsHeader) (at ClientsApp.js:16)
    in MuiThemeProviderOld (at FusePageCarded.js:273)
    in div (at FusePageCarded.js:271)
    in div (at FusePageCarded.js:268)
    in div (at FusePageCarded.js:265)
    in div (at FusePageCarded.js:258)
    in FusePageCarded (created by Context.Consumer)
    in Connect(FusePageCarded) (created by WithStyles(Connect(FusePageCarded)))
    in WithStyles(Connect(FusePageCarded)) (at ClientsApp.js:10)
    in ClientsApp (at withReducer.js:18)
    in _class (created by LoadableComponent)
    in LoadableComponent (created by Context.Consumer)
    in Route (created by Context.Consumer)
    in Switch (created by Context.Consumer)
    in div (at FuseScrollbars.js:155)
    in FuseScrollbars (created by Context.Consumer)
    in Connect(FuseScrollbars) (created by Context.Consumer)
    in Route (created by withRouter(Connect(FuseScrollbars)))
    in withRouter(Connect(FuseScrollbars)) (created by WithStyles(withRouter(Connect(FuseScrollbars))))
    in WithStyles(withRouter(Connect(FuseScrollbars))) (at Layout1.js:185)
    in div (at Layout1.js:180)
    in div (at Layout1.js:174)
    in div (at Layout1.js:168)
    in div (at Layout1.js:163)
    in Layout1 (created by Context.Consumer)
    in Connect(Layout1) (created by Context.Consumer)
    in Route (created by withRouter(Connect(Layout1)))
    in withRouter(Connect(Layout1)) (created by WithStyles(withRouter(Connect(Layout1))))
    in WithStyles(withRouter(Connect(Layout1))) (at FuseLayout.js:91)
    in FuseLayout (created by Context.Consumer)
    in Connect(FuseLayout) (created by Context.Consumer)
    in Route (created by withRouter(Connect(FuseLayout)))
    in withRouter(Connect(FuseLayout)) (created by WithStyles(withRouter(Connect(FuseLayout))))
    in WithStyles(withRouter(Connect(FuseLayout))) (at App.js:37)
    in MuiThemeProviderOld (at FuseTheme.js:10)
    in FuseTheme (created by Context.Consumer)
    in Connect(FuseTheme) (created by Context.Consumer)
    in Route (created by withRouter(Connect(FuseTheme)))
    in withRouter(Connect(FuseTheme)) (at App.js:36)
    in FuseAuthorization (created by Context.Consumer)
    in Connect(FuseAuthorization) (created by Context.Consumer)
    in Route (created by withRouter(Connect(FuseAuthorization)))
    in withRouter(Connect(FuseAuthorization)) (at App.js:35)
    in Router (at App.js:34)
    in Auth (created by Context.Consumer)
    in Connect(Auth) (at App.js:33)
    in Provider (at App.js:32)
    in JssProvider (at App.js:31)
    in App (at src/index.js:13)

console.<computed> @ index.js:1437
logCapturedError @ react-dom.development.js:17848
logError @ react-dom.development.js:17884
update.callback @ react-dom.development.js:18907
callCallback @ react-dom.development.js:17072
commitUpdateEffects @ react-dom.development.js:17112
commitUpdateQueue @ react-dom.development.js:17102
commitLifeCycles @ react-dom.development.js:18140
commitAllLifeCycles @ react-dom.development.js:19642
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:19866
(anonymous) @ react-dom.development.js:21414
unstable_runWithPriority @ scheduler.development.js:255
completeRoot @ react-dom.development.js:21413
performWorkOnRoot @ react-dom.development.js:21336
performWork @ react-dom.development.js:21241
performSyncWork @ react-dom.development.js:21215
interactiveUpdates$1 @ react-dom.development.js:21500
interactiveUpdates @ react-dom.development.js:2268
dispatchInteractiveEvent @ react-dom.development.js:5086
classCallCheck.js:3 Uncaught TypeError: Cannot call a class as a function
    at _classCallCheck (classCallCheck.js:3)
    at WithStyles (withStyles.js:113)
    at Field.getComponent (react-reactive-form.es.js:2599)
    at Field.render (react-reactive-form.es.js:2610)
    at finishClassComponent (react-dom.development.js:15288)
    at updateClassComponent (react-dom.development.js:15243)
    at beginWork (react-dom.development.js:16233)
    at performUnitOfWork (react-dom.development.js:20253)
    at workLoop (react-dom.development.js:20294)
    at renderRoot (react-dom.development.js:20374)
    at performWorkOnRoot (react-dom.development.js:21331)
    at performWork (react-dom.development.js:21241)
    at performSyncWork (react-dom.development.js:21215)
    at interactiveUpdates$1 (react-dom.development.js:21500)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5086)
bietkul commented 5 years ago

FYI, render accepts a function which receives the control as a parameter. You can use it like this

const fieldConfig = {
    controls: {
        autosuggestion: {
            render: (control) => <AutocomplateField {...control} />,
            meta : {
                label: "some"
            }
        }
    }
}
aturan23 commented 5 years ago

FYI, render accepts a function which receives the control as a parameter. You can use it like this

const fieldConfig = {
    controls: {
        autosuggestion: {
            render: (control) => <AutocomplateField {...control} />,
            meta : {
                label: "some"
            }
        }
    }
}

Thank you to your advice! @bietkul. Bit more question. When I use separate fields it's render just first one:

controls: {
        autosuggestion: {
            render: (control) => <AutocomplateField {...control} />,
            meta : {
                label: "some"
            }
        },
        downshift: {
            render: (control) => <IntegrationDownshift {...control}/>,
            meta: {
                label: 'downshift'
            }
        }
    }

image #