jku-se-react/src/App.js

import React, { Component } from 'react';
import persons from './persons';
//import ReactDOM from 'react-dom';
import './App.css';
import Tables from './Tables';


class App extends Component {
  constructor(props){
    super(props);
    this.persons = [];
    this.state = {
        persons
    };
  };
  
  change = (name) => {
    const newPersons = [...this.state.persons];
    newPersons.map( person => {
      if (name == person.name) {
        person.speed = person.speed + Math.floor((Math.random() * 10) + 1)
      }
      
    })
    this.setState({ persons: newPersons });
  }
  
  getLocation = (name) => {
    const newPersons = [...this.state.persons];
    
    if (navigator.geolocation) { //check if geolocation is available
      navigator.geolocation.getCurrentPosition(function(position){
        console.log(position);
        newPersons.map( person => {
          if (name == person.name) {
            person.longitude = position.coords.longitude
            person.latitude = position.coords.latitude
          }
        })
      });   
    }
    this.setState({ persons: newPersons });
  }
  
  render (){
    setTimeout(this.getLocation, 2000)

    return (
      <div id="wrapper">
        <Tables persons={persons}/>
        <div id="debug"> </div>
        <button
            onClick={ () => {
              this.getLocation("Bernie");
              }}
              > Bernie </button>
        <button
            onClick={ () => {
              this.getLocation("Martin");
              }}
              > Martin </button>
        <button
            onClick={ () => {
              this.getLocation("Simon");
              }}
              > Simon </button>
        <button
            onClick={ () => {
              this.getLocation("Lukas");
              }}
              > Lukas </button>
             
      </div>
  );
  }
}



export default App;