CODEWITHSUNDEEP
javascriptreactjs
Robert Gurjiev
Robert Gurjiev

Reputation: 520

How to import component correctly in React.js?

I have this project structure

enter image description here

Sorry for question, I am new in React, I can't uderstand how I should call this code in ol-map.js

import React from "react";

import {
  Map,
  layer,
  Layers
} from "react-openlayers";

class olMap extends React.Component {
  render() {
    return (
      <div className="Map">
        <Map view={{ center: [0, 0], zoom: 2 }}>
          <Layers>
            <layer.Tile />
          </Layers>
        </Map>
      </div>
    );
  }
}

export default olMap;

in my Map.js page?

import React, {Component} from 'react';
import olMap from '../components/map/ol-test3/ol-map';

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

export default Map;

P.S. This is index.js file and I have no idea why I need it.

import React from "react";
import ReactDOM from "react-dom";
import olMap from "./ol-map";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <olMap />
  </React.StrictMode>,
  rootElement
);

Upvotes: 0

Views: 309

Answers (2)

Zain Ul Abideen
Zain Ul Abideen

Reputation: 1602

import OLMap from "../map/ol-test3/ol-map"

Name does not matter in default export so you can name whatever you want while importing.

Upvotes: 1

dejoma
dejoma

Reputation: 494

In your component .js, make sure you have 

import React, { Component } from "react";
class OLMap extends Component {

And then

import OLMap from "./OLMap";

And of course check your folder structure

Upvotes: 1

Related Questions