Home>

SyntaxError: UNEXPECTED TOKEN and an error.

Import React, {Component} from 'React';
IMPORT AXIOS from 'Axios';
Import SearchForm from './SearchForm';
IMPORT GEOCODERESULT from './Geocoderesult';
Import Map from './map';
CONST GEOCODE_ENDPOINT= 'https://maps.googleapis.com/maps/api/geocode/json';
Class App EXTENDS Component {
  Constructor (PROPS) {
    SUPER (PROPS);
    this.state= {
    };
  }
  SETERRORMESSAGE (MESSAGE) {
    this.setState ({
      Address: Message,
      LAT: 0,
      LNG: 0,
    }))
  }
  HANDLEPLACESUBMIT (PLACE) {
    axios
    .get (geocode_endpoint, {params: {address: place}})
    .then ((Results)= >
 {
      console.log (Results);
      const data= results.data;
      const result= data.results [0];
      Switch (Data.Status) {
        Case 'OK': {
          const location= result.geometry.location;
          this.setState ({
            address: Result.formatted_Address,
            LAT: Location.lat,
            LNG: Location.Lng,
          }))
          Break;
        }
        CASE 'ZERO_RESULTS': {
          This.setErrorMessage ('no result was found);
          Break;
        }
        DEFAULT: {
          This.setErrorMessage ('error has occurred');
          }
        }
      })
        .catch ((Error)= >
 {
            This.setErrorMessage ('Failed to Communicate');
          }))
      }
      const location= result.geometry.location;
      this.setState ({
        address: Result.formatted_Address,
        LAT: Location.lat,
        LNG: Location.Lng,
      }))
    };
    }
  render () {
    RETURN (
      ≪
DIV >
        ≪
H1 >
Latitude Longitude Search <
/H1 >
        ≪
SearchForm ONSUBMIT= {Place= >
 this.handlePlaceSubmit (Place)} />
        ≪
Geocoderesult
          Address= {this.state.address}
          LAT= {this.state.lat}
          LNG= {this.state.lng}
        />
        ≪
Map Lat= {this.state.lat} lng= {this.state.lng} />
      ≪
/DIV >
    ;
  }
}
export Default App;

If you write and execute the code with 

,

Error in ./src/components/app.jsx
Module Build Failed: SyntaxError: Unexpected TOKEN (56:12)
  54 |}
  55 |
≫
 56 | CONST LOCATION= RESULTS.GEOMETRY.LOCATION;
     | ^
  57 | this.setState ({
  58 | Address: Result.formatted_Address,
  59 | Lat: Location.lat,

and an error occurred. CONST LOCATION= RESULTS.GEOMETRY.LOCATION; Will the line of something strange? I thought but I do not know the cause. . . It may be the number of other parentheses. . .
I hope you point out the area of ​​the error.

  • Answer # 1

    I tried to combine the indent,AppIn class definition,const location= result.geometry.location;From the line ofrenderIt seems that the description until the line before the method definition is out of the method definition.

    CLASS App EXTENDS COMPONENT {
      Constructor (PROPS) {
        //abbreviation
      }
      SETERRORMESSAGE (MESSAGE) {
        //abbreviation
      }
      HANDLEPLACESUBMIT (PLACE) {
        axios
        .get (geocode_endpoint, {params: {address: place}})
        .then ((Results)= >
     {
          //abbreviation
        })
        .catch (()= >
     {
          This.setErrorMessage ('Failed to Communicate');
        }))
      }
      const location= result.geometry.location; //From here
      this.setState ({
        address: Result.formatted_Address,
        LAT: Location.lat,
        LNG: Location.Lng,
      }))
    };
    } //to this point
      render () {
        //abbreviation
      }
    }