tsamaya

{results.length > 0 &&
              this.renderTab(
                'Map',
                MAP_TAB,
                'fas fa-globe-americas',
                activeTab
              )}

tsamaya

#map {
  width: auto;
  min-height: 350px;
  height: 40vmin;
}

tsamaya

import React, { Component } from 'react';
import L from 'leaflet';
// import Leaflet's CSS
import 'leaflet/dist/leaflet.css';
import './ResultMap.css';

const redIcon = L.icon({
  iconUrl: 'marker-icon-red.png',
  iconSize: [25, 41], // size of the icon
  iconAnchor: [12, 40], // point of the icon which will correspond to marker's location

tsamaya

render() {
  return (
    <div>
      <Header />
      <div className="columns">
        <div className="column is-one-third-desktop">
          <GeocodingForm
            apikey={this.state.apikey}
            query={this.state.query}
            isSubmitting={this.state.isSubmitting}

tsamaya

handleSubmit(event) {
  event.preventDefault();
  this.setState({ isSubmitting: true });
  opencage
    .geocode({ key: this.state.apikey, q: this.state.query })
    .then(response => {
      console.log(response);
      this.setState({ response, isSubmitting: false });
    })
    .catch(err => {

tsamaya

handleChange(key, value) {
  this.setState({ [key]: value });
}

tsamaya

constructor(props) {
  super(props);
  this.state = {
    query: '',
    apikey: '',
    isSubmitting: false,
    response: {},
  };
  this.handleSubmit = this.handleSubmit.bind(this);
  this.handleChange = this.handleChange.bind(this);

tsamaya

import React, { Component } from 'react';
import Header from './Header';
import GeocodingForm from './GeocodingForm';
import GeocodingResults from './GeocodingResults';
import * as opencage from 'opencage-api-client';

tsamaya

// ./src/ResultJSON.js
import React, { Component } from 'react';
import './ResultJSON.css';
class ResultJSON extends Component {
  render() {
    return (
      <article className="message">
        <div className="message-body">
          <pre>{JSON.stringify(this.props.response, null, 2)}</pre>
        </div>

tsamaya

// ./src/ResultList.js
import React, { Component } from 'react';
class ResultList extends Component {
  render() {
    const rate = this.props.response.rate || {};
    const results = this.props.response.results || [];
    return (
      <article className="message">
        <div className="message-body">
          <ol>