React - Array iteration: "'l' is not defined" error when an array is iterated

Question

I am new to React. I am trying to display few locations over Google Maps using google-map-react.

I am using the below source for it.

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;

I am getting the below error, when I run "npm run start" to run my application.

Failed to compile.

./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

Search for the keywords to learn more about each error.

I tried the same iteration over JSFiddle with the below 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 (
      <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"))

It is working fine. Could you please help me to solve this error?

Answer 1

Your .map() call isn't wrapped in curly braces. When embedded inside JSX it needs to be, e.g.

<div> {this.state.data.map(d => <span>{d}</span>)} </div>

Answer 2

I fixed a problem similar with the API of MapQuest using window.L, cause the L was loading with the API so ESLint was saying that L was not declared.