React — итерация массива: ошибка «l» не определена при повторении массива

Я новичок в React. Я пытаюсь отобразить несколько мест на Картах Google, используя google-map-react.

Я использую для этого приведенный ниже источник.

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

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

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
      <div style={{ height: '100vh', width: '100%' }}>
        <GoogleMapReact
          bootstrapURLKeys={{ key: 'AIzaSyDvsaENyQnSHWWGCI6JnLF8_-65Qv9sJaw' }}
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
        >
          <AnyReactComponent
            lat={this.state.loc[0].lat}
            lng={this.state.loc[0].lng}
            text={this.state.loc[0].name}
          />

          <AnyReactComponent
            lat={this.state.loc[1].lat}
            lng={this.state.loc[1].lng}
            text={this.state.loc[1].name}
          />

          this.state.loc.map(l => {
            <AnyReactComponent
            lat={l.lat}
            lng={l.lng}
            text={l.name}
          />
          });

          ));


        </GoogleMapReact>
      </div>
    );
  }
}

export default GMap;

Я получаю следующую ошибку, когда запускаю «npm run start» для запуска своего приложения.

Не удалось скомпилировать.

./src/GMap.js Строка 48: 'l' не определена no-undef Строка 49: 'l' не определена no-undef Строка 50: 'l' не определена no-undef

Найдите ключевые слова, чтобы узнать больше о каждой ошибке.

Я попробовал ту же итерацию с JSFiddle с приведенным ниже кодом.

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 (
      <div>
        <h2>Todos:</h2>
        <ol>
        {this.state.loc.map(item => (
          <li key={item.lat}>
            <label>
              <input type="checkbox" disabled readOnly checked={item.done} /> 
              <span className={item.lng ? "done" : ""}>{item.name}</span>
            </label>
          </li>
        ))}
        </ol>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

Он работает нормально. Не могли бы вы помочь мне решить эту ошибку?