Cannot read property 'props' of undefined

I get the error: "Cannot read property 'props' of undefined" if I run the following code. Both files are in the same folder. Can you please explain what am I doing wrong?

App.js

import React, { Component } from 'react';
import SeasonDisplay from './SeasonDisplay';

class App extends Component {
  state = {
    lat: null,
    errorMessage: ''
  };

  componentDidMount() {
    window.navigator.geolocation.getCurrentPosition(
      position => {
        this.setState({
          lat: position.coords.latitude
        });
      },
      err => {
        console.log(err);
        this.setState({ errorMessage: err.message });
      }
    );
  }

  render() {
    if (this.state.errorMessage && !this.state.lat) {
      return <div>Error: {this.state.errorMessage}</div>;
    }
    if (!this.state.errorMessage && this.state.lat) {
      // return <div>latitude is {this.state.lat}</div>;
      return <SeasonDisplay lat={this.state.lat} />;
    }
    return <div>Loading...</div>;
  }
}

export default App;

SeasonDisplay.js

import React from 'react';

const SeasonDisplay = props => {
  return <div>{props.lat}</div>;
};

export default SeasonDisplay;

Blog

Cannot read property 'props' of undefined

Kayut

Join Our Newsletter. No Spam, Only the good stuff.

Related