title: How do I write the following Mapbox map layer in React.js?
body: <p>I am trying to create a polygon layer over the mapbox map using ReactMapboxGl. I want to convert the following Mapbox Javascript code into React.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>map.on('load', function () {
  
      map.addLayer({
          'id': 'maine',
          'type': 'fill',
          'source': {
              'type': 'geojson',
              'data': {
                  'type': 'Feature',
                  'geometry': {
                      'type': 'Polygon',
                      'coordinates': [[[-67.13734351262877, 45.137451890638886],
                          [-66.96466, 44.8097],
                          [-68.03252, 44.3252],
                          [-69.06, 43.98],
                          [-70.11617, 43.68405],
                          [-70.64573401557249, 43.090083319667144],
                          [-70.75102474636725, 43.08003225358635],
                          [-70.79761105007827, 43.21973948828747],
                          [-70.98176001655037, 43.36789581966826],
                          [-70.94416541205806, 43.46633942318431],
                          [-71.08482, 45.3052400000002],
                          [-70.6600225491012, 45.46022288673396],
                          [-70.30495378282376, 45.914794623389355],
                          [-70.00014034695016, 46.69317088478567],
                          [-69.23708614772835, 47.44777598732787],
                          [-68.90478084987546, 47.184794623394396],
                          [-68.23430497910454, 47.35462921812177],
                          [-67.79035274928509, 47.066248887716995],
                          [-67.79141211614706, 45.702585354182816],
                          [-67.13734351262877, 45.137451890638886]]]
                  }
              }
          },
          'layout': {},
          'paint': {
              'fill-color': '#088',
              'fill-opacity': 0.8
          }
      });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm getting the following errors:</p>
  
  <pre><code> Line 29:  'type' is not defined  no-undef
   Line 30:  'data' is not defined  no-undef
  </code></pre>
  
  <p>I tried importing type and data from <code>react-mapbox-gl</code>, but it doesn't work. My current version looks something like this:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import ReactMapboxGl, {Layer, Feature } from "react-mapbox-gl";
  
  class MapBoxCustom extends React.Component {
    render() {
      return (
        &lt;Map
          style="mapbox://styles/mapbox/streets-v9"
          center={[-114.090194,51.066226]}
          containerStyle={{
            height: "100vh",
            width: "100vw"
          }}&gt;
          &lt;Layer
            id = 'Polygon'
            type= 'fill'
            source= {
              type = 'geojson',
              data = {
                'type': 'Feature',
                'geometry': {
                  'type': 'Polygon',
                  'coordinates': [[[-67.13734351262877, 45.137451890638886],
                  [-66.96466, 44.8097],
                [-68.03252, 44.3252],
                [-69.06, 43.98],
                [-70.11617, 43.68405],
                [-70.64573401557249, 43.090083319667144],
                [-70.75102474636725, 43.08003225358635],
                [-70.79761105007827, 43.21973948828747],
                [-70.98176001655037, 43.36789581966826],
                [-70.94416541205806, 43.46633942318431],
                [-71.08482, 45.3052400000002],
                [-70.6600225491012, 45.46022288673396],
                [-70.30495378282376, 45.914794623389355],
                [-70.00014034695016, 46.69317088478567],
                [-69.23708614772835, 47.44777598732787],
                [-68.90478084987546, 47.184794623394396],
                [-68.23430497910454, 47.35462921812177],
                [-67.79035274928509, 47.066248887716995],
                [-67.79141211614706, 45.702585354182816],
                [-67.13734351262877, 45.137451890638886]]]
              }
            }
          }
          paint={{ "fill-color": "#81D8D0", "fill-opacity": 0.5 }}/&gt;
        &lt;/Map&gt;
      );
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any help would be appreciated.</p>