ishaan6395 / react-leaflet-enhanced-marker

This library will help render dynamic react components as markers on leaflet maps easily
MIT License
39 stars 10 forks source link

Crash when icon component has multiple child components #17

Closed ghost closed 3 years ago

ghost commented 3 years ago

Hey you cant render a a marker with a react component as an icon that has multiple child components.

Code to reporduce: ` <Marker icon={

1
2
        }
        position={[0, 0]}></Marker>`

This crashes with the following error message:

Uncaught TypeError: Cannot read property 'onClick' of undefined at IconUtils.js:47 at Array.forEach () at IconUtils.js:44 at getChildrenProperties (IconUtils.js:55) at Marker.componentDidMount (Markers.js:109) at commitLifeCycles (react-dom.development.js:20663) at commitLayoutEffects (react-dom.development.js:23426) at HTMLUnknownElement.callCallback (react-dom.development.js:3945) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994) at invokeGuardedCallback (react-dom.development.js:4056) at commitRootImpl (react-dom.development.js:23151) at unstable_runWithPriority (scheduler.development.js:646) at runWithPriority$1 (react-dom.development.js:11276) at commitRoot (react-dom.development.js:22990) at performSyncWorkOnRoot (react-dom.development.js:22329) at react-dom.development.js:11327 at unstable_runWithPriority (scheduler.development.js:646) at runWithPriority$1 (react-dom.development.js:11276) at flushSyncCallbackQueueImpl (react-dom.development.js:11322) at flushSyncCallbackQueue (react-dom.development.js:11309) at flushPassiveEffectsImpl (react-dom.development.js:23620) at unstable_runWithPriority (scheduler.development.js:646) at runWithPriority$1 (react-dom.development.js:11276) at flushPassiveEffects (react-dom.development.js:23447) at react-dom.development.js:23324 at workLoop (scheduler.development.js:590) at flushWork (scheduler.development.js:545) at MessagePort.performWorkUntilDeadline (scheduler.development.js:157)

ishaan6395 commented 3 years ago

You need to wrap the multiple child elements under </React.Fragment>

Rutger commented 1 year ago

Sorry to report I'm having this same issue. Also when using Fragment.