SyntaxError: Unexpected token

SyntaxError: Unexpected token 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 extensions 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 = results.geometry.location;
          This.setState({
            address —result.formatted_address,
            lat —location.lat,
            lng —location.lng,
          });
          break;
        }
        case 'ZERO_RESULTS': {
          This.setErrorMessage('Results not found');
          break;
        }
        default: {
          This.setErrorMessage('Error Occurred');
          }
        }
      })
        .catch(error)=>{
            This.setErrorMessage('Communication Failed');
          });
      }

      const location = results.geometry.location;
      This.setState({
        address —result.formatted_address,
        lat —location.lat,
        lng —location.lng,
      });
    };
    }

  render() {
    return(
      <div>
        <h1>Latitude and Longitude Search</h1>
        <SearchForm onSubmit={place=>this.handlePlaceSubmit(place)}/>
        <GeocodeResult
          address = {this.state.address}
          lat = {this.state.lat}
          lng = {this.state.lng}
        />
        <Maplat={this.state.lat}lng={this.state.lng}/>
      </div>
    );
  }
}

export default App;

Write the code and run it.

ERROR in./src/components/App.jsx
Module built 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,

received an error.I wondered if there was something wrong with the line const location=results.geometry.location; but I didn't know the cause...maybe the number of other brackets...
Please point out the error.

reactjs axios

2022-09-30 11:06

1 Answers

When we combined the indents, it seems that the descriptions from the const location=results.geometry.location; line to the previous line of the render method definition appear outside the method definition.

class App extensions Component {
  constructor(props){
    // approximately
  }

  setErrorMessage(message){
    // approximately
  }

  handlePlaceSubmit(place){
    axios
    .get(GEOCODE_ENDPOINT, {params:{address:place}})
    .then(results)=>{
      // approximately
    })
    .catch(()=>{
      This.setErrorMessage('Communication Failed');
    });
  }

  const location = results.geometry.location;// From here
  This.setState({
    address —result.formatted_address,
    lat —location.lat,
    lng —location.lng,
  });
};
} // That's it

  render() {
    // approximately
  }
}

2022-09-30 11:06

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656