React Cannot access props value outside class using (props)=>

Question

I am trying to have GoogleMapGazi access the props of my class GoogleMaps using the 'props=> ' but I cannot do it. I have passed the lat and lng props to the class by the parent component. Here's my code, any help will be great!

const GoogleMapGazi = withGoogleMap(props => (
  <GoogleMap
    defaultCenter={{ lat: 25.804281, lng: -80.1903893 }}
    defaultZoom={15}
  >
    <Marker position={{ lat: props.lat, lng: props.lng }} />
  </GoogleMap>
));

class GoogleMaps extends Component {
  render() {
    return (
      <div>
        <GoogleMapGazi
          containerElement={<div style={{ height: `500px`, width: "600px" }} />}
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default GoogleMaps;

You are not passing the lat and lng props to the GoogleMapGazi component in the GoogleMaps parent component. — Tholle
– Tholle, Commented Aug 2, 2018 at 17:56
Why are you doing props.lat? GoogleMapGazi doesn't have the prop lat and lng defined, why would you expect them to be magically defined in your GoogleMapGazi? — Derek 朕會功夫
– Derek 朕會功夫, Commented Aug 2, 2018 at 17:57

Tholle · Accepted Answer · 2018-08-02 17:58:28Z

1

You have to pass down the props from the GoogleMaps component.

You could explicitly pass down the lat and lng props, or you can use the spread syntax to pass down all props.

class GoogleMaps extends Component {
  render() {
    return (
      <div>
        <GoogleMapGazi
          containerElement={<div style={{ height: `500px`, width: "600px" }} />}
          mapElement={<div style={{ height: `100%` }} />}
          {...this.props}
        />
      </div>
    );
  }
}

answered Aug 2, 2018 at 17:58

Tholle

113k22 gold badges209 silver badges198 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

archibal13 Over a year ago

You sir are awesome! Thank you very much!

Collectives™ on Stack Overflow

React Cannot access props value outside class using (props)=>

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related