Closed kunokdev closed 7 years ago
My current workaround for issue I posted above is to hold my custom state and functions within parent container (in my case Next.js page component) and pass everything as props to the HOCs your example provided. I still kept 'mapProps' state method in the compose chain.
Something like this:
<GMap
markers={this.state.mapMarkers}
initialCenter={{ lat: this.state.mapMarkers[0].lat, lng: this.state.mapMarkers[0].lng }}
fetchHoveredMarkerStaticData={this.fetchHoveredMarkerStaticData.bind(this)}
currentlyHoveredMarkerData={this.state.currentlyHoveredMarkerData}
/>
and for example for hover function that I passed, I'd use it like this within HOC you provided:
onChildMouseEnter: ({ setHoveredMarkerId, fetchHoveredMarkerStaticData }) => (hoverKey, { id }) => {
setHoveredMarkerId(id)
fetchHoveredMarkerStaticData(id)
},
I hope this might help somebody who isn't very fimilar with HOCs and recompose library like me and if there is better approach that you would suggest, please do.
Let's assume that I called
GMap
component inside my app like this, passingmarkers
andmapProps
from state.I removed
withState('markers'
as you mentioned here: https://github.com/istarkov/google-map-clustering-example/issues/5#issuecomment-263309104I tried similar pattern here but if I remove
onChange
handler, then markers don't render.which is suggested way to pass state data via props to the component like I showed in code on top of post? I am trying to figure out recompose lib, but I have hard time to figure it all out. Can you please show example of that?