Cannot call a class as a function

[valvic66]

Hello,

The below component throws error when react-google-maps-loader is upgraded to 4.0.0.
Could you provide some guidance pls.

`export class GoogleAddressInputWrapper extends React.Component {
// tslint:disable-next-line
private component: any;

constructor(props: IGoogleAddressInputProps) {
    super(props);
    this.component = GoogleMapsLoader(GoogleAddressInputComponent, {
        libraries: ['places'],
        key: props.googleApiKey
    });
}

public render() {
    if (this.component == null) {
        return null;
    }

    return <this.component {...this.props} />;
}

}`

Error is:

Cannot call a class as a function TypeError: Cannot call a class as a function at _classCallCheck (http://localhost:6006/static/preview.bundle.js:223503:99) at GoogleMapsLoader (http://localhost:6006/static/preview.bundle.js:223518:5) at new GoogleAddressInputWrapper (http://localhost:6006/static/preview.bundle.js:223473:108) at constructClassInstance (http://localhost:6006/static/preview.bundle.js:73144:20) at updateClassComponent (http://localhost:6006/static/preview.bundle.js:74679:9) at beginWork (http://localhost:6006/static/preview.bundle.js:75325:16) at performUnitOfWork (http://localhost:6006/static/preview.bundle.js:78157:16) at workLoop (http://localhost:6006/static/preview.bundle.js:78186:26) at renderRoot (http://localhost:6006/static/preview.bundle.js:78217:9) at performWorkOnRoot (http://localhost:6006/static/preview.bundle.js:78792:24)

Thanks.

[cedricdelpoux]

Hello @valvic66, ReactGoogleMapsLoader v4 is a React component with a render props.

Please use like this:

<ReactGoogleMapLoader
    params={{
        key: YOUR_API_KEY, // Define your api key here
        libraries: "places,geometry", // To request multiple libraries, separate them with a comma
    }}
    render={googleMaps =>
        googleMaps && (
            <div>Google Maps is loaded !</div>
        )}
    />

[valvic66]

Still unable to make it work:

      this.component = <GoogleMapsLoader 
        params={{
            key: props.googleApiKey,
            libraries: "places,geometry"
        }}
        render={(googleMaps: any) => 
            googleMaps: any && (
                <div>
                    <GoogleAddressInputComponent />
                </div>
            )}
    />;

GoogleAddressInputComponent is an input component:
import { GoogleAddressInputComponent, IGoogleAddressInputComponentProps } from './GoogleAddressInputComponent';

[cedricdelpoux]

I don't understand wh'y you put the component into this.component. I'm not sure it should work to make

 return <this.component {...this.props} />;