How to import a component to UI?

Question

Sorry, I am new in React.js, just switched from Java and I can't understand how I shall show my map on UI. Just give me a hint

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

class TestMap extends Component {
  render() {
    return (
      <div className="GoogleMap">
        <Map google={this.props.google} zoom={14} />
      </div>
    );
  }
}

GoogleApiWrapper({ 
  apiKey: ({api-key})
})(TestMap);

export {TestMap, GoogleApiWrapper};

here:

import React, { Component } from 'react';
import {TestMap} from '../components/map/google/TestMap';

class Map extends Component {
    render() {
        return (
          //???
        );
    }
}

export default Map;

Answer 1

It's a react component, render it as JSX

import React, { Component } from 'react';
import { TestMap } from '../components/map/google/TestMap';

class Map extends Component {
  render() {
    return (
      <TestMap />
    );
  }
}

export default Map;

An aside, don't name your class component Map as there is already a Javascript Map object and this could be the cause for some major confusion and bugs.

EDIT

Your map is forever loading as you've exported the undecorated TestMap, i.e. it isn't decorated with the google api and props.

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

class TestMap extends Component {
  render() {
    return (
      <div className="GoogleMap">
        <Map google={this.props.google} zoom={14} />
      </div>
    );
  }
}

// default export the decorated component so the api-key and google prop is processed and injected.
export default GoogleApiWrapper({ 
  apiKey: 'sLiGhTlyReDacTedApIkEy'
})(TestMap);