{"action":"created","issue":{"url":"https://api.github.com/repos/PaulLeCam/react-leaflet/issues/11","labels_url":"https://api.github.com/repos/PaulLeCam/react-leaflet/issues/11/labels{/name}","comments_url":"https://api.github.com/repos/PaulLeCam/react-leaflet/issues/11/comments","events_url":"https://api.github.com/repos/PaulLeCam/react-leaflet/issues/11/events","html_url":"https://github.com/PaulLeCam/react-leaflet/issues/11","id":57466141,"number":11,"title":"Make popup clickable and interactable","user":{"login":"scherler","id":596701,"avatar_url":"https://avatars.githubusercontent.com/u/596701?v=3","gravatar_id":"","url":"https://api.github.com/users/scherler","html_url":"https://github.com/scherler","followers_url":"https://api.github.com/users/scherler/followers","following_url":"https://api.github.com/users/scherler/following{/other_user}","gists_url":"https://api.github.com/users/scherler/gists{/gist_id}","starred_url":"https://api.github.com/users/scherler/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/scherler/subscriptions","organizations_url":"https://api.github.com/users/scherler/orgs","repos_url":"https://api.github.com/users/scherler/repos","events_url":"https://api.github.com/users/scherler/events{/privacy}","received_events_url":"https://api.github.com/users/scherler/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-02-12T14:24:58Z","updated_at":"2015-02-13T08:32:23Z","closed_at":null,"body":"Hi Paul,\r\n\r\nI am trying to use clickable elements in popups, but without success. \r\n\r\nFor example imagine the following:\r\n\r\n```javascript\r\n    <Marker position={position}>\r\n      <Popup>\r\n          <button onClick={this.bus}>thorsten</button>\r\n        </Popup>\r\n    </Marker>\r\n```\r\n\r\nNow if you click on the button there is nothing happening (at least there should be a complain about \"bus\" not defined. On a side note I tried as well with \"onclick\" and as well with onClick=\"this.bus()\"\r\n\r\nNow when I patch the marker like:\r\n\r\n    --- a/src/Marker.js\r\n    +++ b/src/Marker.js\r\n    @@ -16,6 +16,9 @@ module.exports = React.createClass({\r\n       componentWillMount() {\r\n         var {map, position, ...props} = this.props;\r\n    -    this._leafletElement = Leaflet.marker(position, props);\r\n    +    var marker = Leaflet.marker(position, props);\r\n    +    if (this.props.onClick) {\r\n    +      marker.on('click', this.props.onClick);\r\n    +    }\r\n    +   this._leafletElement = marker;\r\n       },\r\n\r\nAnd do\r\n\r\n    <Marker position={position}  onClick={this.bus}\"/>\r\n\r\nThen it is working as expected but I have no popup.\r\n\r\nTo bring back the popup and not having React.renderToStaticMarkup (which is in the Popup.js) remove all onClicks or logic I use, I came up with the following:\r\n\r\n    --- a/src/Marker.js\r\n    +++ b/src/Marker.js\r\n    @@ -16,6 +16,9 @@ module.exports = React.createClass({\r\n       componentWillMount() {\r\n         var {map, position, ...props} = this.props;\r\n    -    this._leafletElement = Leaflet.marker(position, props);\r\n    +    var marker = Leaflet.marker(position, props);\r\n    +    if (this.props.onClick) {\r\n    +      marker.on('click', this.props.onClick);\r\n    +    }\r\n    +   this._leafletElement = marker;\r\n    +    var popup = this.props.popup;\r\n    +    if (popup) {\r\n    +      var LPopup = Leaflet.popup().setContent(popup);\r\n    +      marker.bindPopup(LPopup);\r\n    +    }\r\n    +    this._leafletElement = marker;\r\n       },\r\n\r\nand in my calling code I have:\r\n\r\n```javascript\r\n   function bus(){\r\n     console.log(\"ssssssssserererererssss\")\r\n   }\r\n\r\n   Leaflet.thorsten={};\r\n   Leaflet.thorsten.bus = bus;\r\n...\r\n    var  xxx = '<div><h2>bus</h2><button onclick=\"L.thorsten.bus()\">thorsten</button></div>';\r\n     <Marker position={position} popup={xxx}\"/>\r\n```\r\n\r\nThis finally works, but it really feels like a workaround more then the way to go.\r\n\r\nDo you know a better way?"},"comment":{"url":"https://api.github.com/repos/PaulLeCam/react-leaflet/issues/comments/74220693","html_url":"https://github.com/PaulLeCam/react-leaflet/issues/11#issuecomment-74220693","issue_url":"https://api.github.com/repos/PaulLeCam/react-leaflet/issues/11","id":74220693,"user":{"login":"PaulLeCam","id":790995,"avatar_url":"https://avatars.githubusercontent.com/u/790995?v=3","gravatar_id":"","url":"https://api.github.com/users/PaulLeCam","html_url":"https://github.com/PaulLeCam","followers_url":"https://api.github.com/users/PaulLeCam/followers","following_url":"https://api.github.com/users/PaulLeCam/following{/other_user}","gists_url":"https://api.github.com/users/PaulLeCam/gists{/gist_id}","starred_url":"https://api.github.com/users/PaulLeCam/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/PaulLeCam/subscriptions","organizations_url":"https://api.github.com/users/PaulLeCam/orgs","repos_url":"https://api.github.com/users/PaulLeCam/repos","events_url":"https://api.github.com/users/PaulLeCam/events{/privacy}","received_events_url":"https://api.github.com/users/PaulLeCam/received_events","type":"User","site_admin":false},"created_at":"2015-02-13T08:32:23Z","updated_at":"2015-02-13T08:32:23Z","body":"Hi,\r\nI use `React.renderToStaticMarkup()` because Leaflet sets the content of the Popup by manipulating the DOM itself (https://github.com/Leaflet/Leaflet/blob/master/src/layer/Popup.js#L172), so at this point it is not possible to use React elements.\r\n\r\nInstead of having to patch react-leaflet, I think another way you could do it is to instantiate a Leaflet Popup and attach it to the Marker in your application instead of using the `<Popup>` element, this way you would have full control over it.\r\n\r\nThe best solution may be to render an empty element with a specific ID as the content of the Popup so that Leaflet inserts it in the DOM, and then call `React.render()` on this element, but I've never tried this so I have no idea how it would behave. I'll try this when I can find some time."}}