DEV Community

Kayut
Kayut

Posted on

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;

Enter fullscreen mode Exit fullscreen mode

SeasonDisplay.js

import React from 'react';

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

export default SeasonDisplay;

Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
kayut profile image
Kayut

There was an issue with my VSCode. The code is fine.

Collapse
 
shubhamchopade profile image
shubhamchopade

What was the issue with VSCode? How did you solve it?