help with props

[cezarneaga]

Hi there,

in the clustering example you are using data from a static file. i don't have experience with recompose unfortunately and i got stuck.

i have a use case where i want to load the GMap.js inside App.js. App holds the state and the markersData would be in the state. how can i load this into GMap.js as props and then if state changes clusters change with it? thanks Cezar

[istarkov]

Example will work even with dynamic data, just get the state not from withState https://github.com/istarkov/google-map-clustering-example/blob/master/src/GMap.js#L56-L60 but from redux (connect) or any other source

[istarkov]

To be clear - everywhere in the source I assume that markers can be changed, like https://github.com/istarkov/google-map-clustering-example/blob/master/src/GMap.js#L89-L91

[cezarneaga]

i do not use redux on this. i guess this is my question: how do i get state into GMap.js from App.js? do I need withState instances:

withState(
    'markers',
    'setMarkers',
    markersData
  ),
  withState(
    'hoveredMarkerId',
    'setHoveredMarkerId',
    -1
  ),
  withState(
    'mapProps',
    'setMapProps',
    {
      center: { lat: 46.2, lng: 24 },
      zoom: 7,
    }
  ),

should they be withProps? please if you have time, give me a quick example Thanks, C

[istarkov]

Have you tried just to start write your code? It's 10x faster just to try pass markers as a property and remove or not withState to check what you will get vs writing a question. Also recompose have a good documentation about it's enhancers ;-) It's simple code, just start writing and all will be fine ;-)

[cezarneaga]

:) @istarkov, i tried. i wouldnt have written otherwise. i used react-google-maps and i displayed clusters there but that package doesnt handle redrawing of markers on state changes. this is how i got to your package. only mentioning this to say that i started... :)

C

[cezarneaga]

please explain just how i could get the markers( from props.markers) into the compose function

[istarkov]

Just remove withState('markers' and pass markers as a property to GMap https://github.com/istarkov/google-map-clustering-example/blob/master/src/Layout.js#L23 like <GMap markers={yourMarkers}.

Be sure that all such properties u use in immutable manner, so if any marker has changed, reference to array of markers must also be changed.

Otherwise withPropsOnChange with cluster creating logic will not be called.

[cezarneaga]

that i already did. i can see them in React Dev Tools. i get this

warning.js:36 Warning: flattenChildren(...): Encountered two children with the same key, `.$1_242`. Child keys must be unique; when two children share a key, only the first child will be used.
    in div (created by GoogleMapMarkers)

[istarkov]

It seems that you have markers with duplicate id's. As current source uses id's as key for react elements in array https://github.com/istarkov/google-map-clustering-example/blob/master/src/GMap.js#L33-L34

React doc's about keys https://facebook.github.io/react/docs/reconciliation.html#keys

[cezarneaga]

checked that. its not. id's are unique generated with math.random eg: "50d84f0e1e601"

i think id: ${numPoints}_${points[0].id} might be the culprit

[istarkov]

It might not, as points in every cluster are different, so taking an id of a first point in each cluster will give unique id's for clusters too

[cezarneaga]

thanks @istarkov. will come back to this another day and keep trying.