CODEWITHSUNDEEP
reactjshigher-order-components
Jesse James
Jesse James

Reputation: 75

needing props from Base component to be available in the higher order component

I have a higher order component that I am using to wrap my base component like so:

function Map() {
  return (
    <GoogleMap
      defaultZoom={10}
      defaultCenter={{
        lat: 45.421532,
        lng: -75.697189
      }}
    >
      <Marker></Marker>
    </GoogleMap>
  );
}

and below is my base component which is wrapped like so:

const WrappedMap = withScriptjs(withGoogleMap(Map));

export default function TheMap({ locationData }) {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <WrappedMap
        googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_KEY}&v=3.exp&libraries=geometry,drawing,places`}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </div>
  );
}

the problem I am having is that I need the props from my base component (locationData) which is an array of latitude and longitude data passed from the parent component to be available up in the higher order component. I need that array to map over to create my markers. I'm brand new to higher order components, can anybody please help me. is it possible to get those props I need to the higher order component?

Upvotes: 0

Views: 37

Answers (1)

Johnny Zabala
Johnny Zabala

Reputation: 2465

You just need to pass the data to the component:

const WrappedMap = withScriptjs(withGoogleMap(Map));

export default function TheMap({ locationData }) {
  return (
    <div style={{ width: "100vw", height: "100vh" }}>
      <WrappedMap
        googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_KEY}&v=3.exp&libraries=geometry,drawing,places`}
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
        data={locationData}
      />
    </div>
  );
}

Now you can access data in the component being rendered by withScriptjs

Upvotes: 1

Related Questions