DEV Community

loading...

Cannot read property 'props' of undefined

kayut profile image Kayut ・1 min read

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

Discussion (2)

pic
Editor guide
Collapse
kayut profile image
Kayut Author

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?