title: React - Array iteration: "'l' is not defined" error when an array is iterated
body: <p>I am new to React. I am trying to display few locations over Google Maps using google-map-react.</p>
  
  <p>I am using the below source for it.</p>
  
  <pre><code>import React, { Component } from 'react';
  import GoogleMapReact from 'google-map-react';
  
  const AnyReactComponent = ({ text }) =&gt; &lt;div&gt;{text}&lt;/div&gt;;
  
  class GMap extends Component {
  
    static defaultProps = {
      center: {
        lat: 15.95,
        lng: 79.33
      },
      zoom: 7
    };
  
    componentWillMount() {
      var locations = [
        {lat: 16.16, lng: 80.80, name:'XYZ'},
        {lat: 14.14, lng: 77.77, name:'ABC'},
        {lat: 13.13, lng: 79.79, name:'CYZ'},
        {lat: 13.31, lng: 79.97, name:'EWWE'}];
        this.setState({loc:locations});
    }
  
    render() {
      return (
        // Important! Always set the container height explicitly
        &lt;div style={{ height: '100vh', width: '100%' }}&gt;
          &lt;GoogleMapReact
            bootstrapURLKeys={{ key: 'AIzaSyDvsaENyQnSHWWGCI6JnLF8_-65Qv9sJaw' }}
            defaultCenter={this.props.center}
            defaultZoom={this.props.zoom}
          &gt;
            &lt;AnyReactComponent
              lat={this.state.loc[0].lat}
              lng={this.state.loc[0].lng}
              text={this.state.loc[0].name}
            /&gt;
  
            &lt;AnyReactComponent
              lat={this.state.loc[1].lat}
              lng={this.state.loc[1].lng}
              text={this.state.loc[1].name}
            /&gt;
  
            this.state.loc.map(l =&gt; {
              &lt;AnyReactComponent
              lat={l.lat}
              lng={l.lng}
              text={l.name}
            /&gt;
            });
  
            ));
  
  
          &lt;/GoogleMapReact&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default GMap;
  </code></pre>
  
  <p>I am getting the below error, when I run "npm run start" to run my application.</p>
  
  <blockquote>
    <p>Failed to compile.</p>
    
    <p>./src/GMap.js   Line 48:  'l' is not defined  no-undef   Line 49:  'l'
    is not defined  no-undef   Line 50:  'l' is not defined  no-undef</p>
    
    <p>Search for the keywords to learn more about each error.</p>
  </blockquote>
  
  <p>I tried the same iteration over JSFiddle with the below code.</p>
  
  <pre><code>class TodoApp extends React.Component {
    constructor(props) {
      super(props)
  
      this.state = {
          loc: [
          {lat: 16.16, lng: 80.80, name:'XYZ'},
        {lat: 14.14, lng: 77.77, name:'ABC'},
        {lat: 13.13, lng: 79.79, name:'CYZ'},
        {lat: 13.31, lng: 79.97, name:'EWWE'}
        ]
      }
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;h2&gt;Todos:&lt;/h2&gt;
          &lt;ol&gt;
          {this.state.loc.map(item =&gt; (
            &lt;li key={item.lat}&gt;
              &lt;label&gt;
                &lt;input type="checkbox" disabled readOnly checked={item.done} /&gt; 
                &lt;span className={item.lng ? "done" : ""}&gt;{item.name}&lt;/span&gt;
              &lt;/label&gt;
            &lt;/li&gt;
          ))}
          &lt;/ol&gt;
        &lt;/div&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;TodoApp /&gt;, document.querySelector("#app"))
  </code></pre>
  
  <p>It is working fine. 
  Could you please help me to solve this error?</p>