Format component to html tag

Question

I am importing a class called MapContainer from maps.js and displaying my div files in the App.js. is there a way to change the google api wrapper along side with the api key to work directly in the html tags.

import { GoogleApiWrapper } from 'google-maps-react';

<div class="content">

GoogleApiWrapper({
  apiKey: 'AIzaSyDkXk3MuVjovvaVAnl2wt2j_2ES-INLJ0s'
})(MapContainer);
          
        </div>

I tried several other methods that require to change the code of app.js and maps.js and yet it doesnt work. Hence why I went back hopefully fix the formatting for the div.

ps. the MapContainer is the google map renderer but requires the API key along side it to generate the map.

Answer 1

Try using React.createElement:

<div class="content">

{React.createElement(GoogleApiWrapper({
  apiKey: 'AIzaSyDkXk3MuVjovvaVAnl2wt2j_2ES-INLJ0s'
})(MapContainer)}
       
        </div>

Answer 2

From the documentation Automatically Lazy-loading Google API

the GoogleApiWrapper Higher-Order component can be configured by passing a function that will be called with the wrapped component's props and should return the configuration object.

You can pass the apiKey prop to the MapContainer component.

maps.tsx:

import React from "react";
import { GoogleApiWrapper, Map } from "google-maps-react";

export class MapContainer extends React.Component<any> {
  render() {
    console.debug("apiKey: ", this.props.apiKey);
    return <Map google={this.props.google} />;
  }
}

export default GoogleApiWrapper((props) => ({
  apiKey: props.apiKey
}))(MapContainer);

App.tsx:

import "./styles.css";
import MapContainer from "./maps";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <MapContainer apiKey="AIzaSyDkXk3MuVjovvaVAnl2wt2j_2ES-INLJ0s" />
    </div>
  );
}

codesandbox