LaVOZs

The World’s Largest Online Community for Developers

'; javascript - showPosition() is not defined - LavOzs.Com

I am creating a simplified clone of a google chrome extension MOMENTUM.

So far the app shows a random quote, a random unsplash image, time and current weather.

I am trying to use html geolocation to get the current position of the user ( position.coords.latitude + position.coords.longitude) to render the weather info of user's location by calling openweather API.

The app shows me a mistake, it seems that there is soemthing wrong with showPosition()

getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } 
  }

  showPosition(position) {
    this.setState({x : position.coords.latitude});
    this.setState({y : position.coords.longitude});

  }


  componentDidMount() {
    this.getLocation();
    this.showPosition();
  }

Here is the full code:

import React, {Component} from 'react';
import Fetchbutton from './Fetchbutton';
import './App.css';

 class Quote extends React.Component {
 constructor() {
  super();
   this.state = {
  quote: "",
  city: "",
  temp: 0,
  icon: "",
  x: 0,
  y: 0
}
this.handleClick = this.handleClick.bind(this);
this.handleImg = this.handleImg.bind(this);
this.getWeather = this.getWeather.bind(this);
this.getLocation = this.getLocation.bind(this);
this.showPosition = this.showPosition.bind(this);
 }



handleClick() {
  console.log("click");
    fetch("https://andruxnet-random-famous-quotes.p.rapidapi.com/?cat=famous&count=10", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "andruxnet-random-famous-quotes.p.rapidapi.com",
        "x-rapidapi-key": "f37f535d68mshb86f555556662cp16cb04jsn76a3bf17ed18"
    }
    })
    .then(response => response.json())
    .then(data => {
      console.log(data[0]);
    // this.setState({quote: data[0]["quote"]});
    })
    .catch(err => {
    console.log(err);
    });
    console.log(this.state.quote);
  }


      getLocation() {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(showPosition);
        } 
      }

      showPosition(position) {
        this.setState({x : position.coords.latitude});
        this.setState({y : position.coords.longitude});

      }


      getWeather() {

      const apiKey = '0c1fc18fa9208d24533cb527b4215e';
      var url = `http://api.openweathermap.org/data/2.5/forecast?lat=${this.state.x}&lon=${this.state.y}&APPID=${apiKey}`;
      // additional code

  fetch(url).then(response => response.json()).then(data=> {
    this.setState({city: data['city']['name']});
    this.setState({temp: data['list'][0]['main']['temp']});
    this.setState({icon: data['list'][0]['weather'][0]['icon']});
    console.log(this.state.icon);
  });



};




 handleImg() {
    fetch(`https://source.unsplash.com/1800x950/?wallpapers`).then((response)=> {
  document.body.style.backgroundImage = `url(${response.url})`
  });
  }

  componentDidMount() {
    this.getWeather();
    this.handleClick();
    this.handleImg();
    this.getLocation();
    this.showPosition();


     }

  render() {
    var x = 0;
    var y = 0;
    const weather = Math.round(this.state.temp - 273);
    console.log(weather);
    const icon = this.state.icon;
    const src = "http://openweathermap.org/img/w/"+ icon +".png";
    console.log(src);
  return (
    <div>
      <img className="img__icon" src={src} alt="" />
      <p> {this.state.city}</p>
      <p> {weather}<sup>O</sup>C</p>
      <div className="button">
        <div className="button__random">
          <div>  {new Date().toLocaleTimeString().replace(/([\d]+:[\d]{2})(:[\d]{2})(.*)/, "$1$3")}</div>
          <hr/>
          <button onClick={this.handleClick}> New Quote</button>
          <p> {this.state.quote}</p>
        </div>
      </div>
    </div>
  );
}
}

export default Quote;
Related
How to tell if a JavaScript function is defined
What is the preferred syntax for defining enums in JavaScript?
What techniques can be used to define a class in JavaScript, and what are their trade-offs?
How to check a not-defined variable in JavaScript
Uncaught ReferenceError: $ is not defined?
JQuery - $ is not defined
How do I define global variables in CoffeeScript?
JavaScript check if variable exists (is defined/initialized)
Define global variable in a JavaScript function
Babel 6 regeneratorRuntime is not defined