CODEWITHSUNDEEP
javascriptreactjsreact-component
Robert Gurjiev
Robert Gurjiev

Reputation: 520

How to import a component to UI?

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;

Upvotes: 1

Views: 96

Answers (5)

Amin Azimi
Amin Azimi

Reputation: 749

Child Component

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 default TestMap;

Parent Component

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

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

export default Map;

Upvotes: 1

Drew Reese
Drew Reese

Reputation: 203198

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);

Edit unruffled-mayer-d7s1w

Upvotes: 1

Rajat Jain
Rajat Jain

Reputation: 116

Firstly I am not able to understand why are you adding one more abstraction of component over your Map component. You can directly use the TestMap component you have used in the first code snippet. Anyway, You can directly return from the Map Component.

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

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

export default Map;

Upvotes: 1

Dureksha Wasala
Dureksha Wasala

Reputation: 36

Specify the component inside the return block.In your case <TestMap /> inside the return of Map component.

Upvotes: 1

Charlie
Charlie

Reputation: 160

You need to return your component as JSX markup, Introducing JSX.

Also if you are new to react is suggest starting here, Getting Started.

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

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

Upvotes: 1

Related Questions