Google map react showing type errors

Question

I am trying to build an app with ionic and reactjs. Want to show google maps and have installed google-maps-react package. But, the following example throws the error

Binding element 'text' implicitly has an 'any' type. TS7031

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

const AnyReactComponent = ({ text }) => <div>{text}</div>;

class SimpleMap extends Component {
  static defaultProps = {
    center: {
      lat: 59.95,
      lng: 30.33
    },
    zoom: 11
  };

  render() {
    return (
      // Important! Always set the container height explicitly
      <div style={{ height: '100vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: /* YOUR KEY HERE */ }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text="My Marker"
          />
        </GoogleMapReact>
      </div>
    );
  }
}

export default SimpleMap;

Answer 1

I believe it is a typescript error... something like this might get you headed in right direction

interface AnyReactComponentProps {
   text: string;
   lat: any;
   lng: any;
}
const AnyReactComponent: React.FC<AnyReactComponentProps> = ({ text }) => <div>{text}</div>;