{"action":"created","issue":{"url":"https://api.github.com/repos/DeloitteDigitalAPAC/react-habitat/issues/36","repository_url":"https://api.github.com/repos/DeloitteDigitalAPAC/react-habitat","labels_url":"https://api.github.com/repos/DeloitteDigitalAPAC/react-habitat/issues/36/labels{/name}","comments_url":"https://api.github.com/repos/DeloitteDigitalAPAC/react-habitat/issues/36/comments","events_url":"https://api.github.com/repos/DeloitteDigitalAPAC/react-habitat/issues/36/events","html_url":"https://github.com/DeloitteDigitalAPAC/react-habitat/issues/36","id":324106600,"number":36,"title":"Passing Div content to a React component.","user":{"login":"ImranHishaam","id":10083410,"avatar_url":"https://avatars2.githubusercontent.com/u/10083410?v=4","gravatar_id":"","url":"https://api.github.com/users/ImranHishaam","html_url":"https://github.com/ImranHishaam","followers_url":"https://api.github.com/users/ImranHishaam/followers","following_url":"https://api.github.com/users/ImranHishaam/following{/other_user}","gists_url":"https://api.github.com/users/ImranHishaam/gists{/gist_id}","starred_url":"https://api.github.com/users/ImranHishaam/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ImranHishaam/subscriptions","organizations_url":"https://api.github.com/users/ImranHishaam/orgs","repos_url":"https://api.github.com/users/ImranHishaam/repos","events_url":"https://api.github.com/users/ImranHishaam/events{/privacy}","received_events_url":"https://api.github.com/users/ImranHishaam/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-05-17T16:56:52Z","updated_at":"2018-05-17T23:27:03Z","closed_at":null,"author_association":"NONE","body":"Hi, Is there a possibility of passing a div component to a react component along with the data.\r\nAt the moment we have implemented react-habitat within the entire project and we have a requirement where a div needs to be embedded to a react component. \r\n\r\nPlease let me know if there is a possibility on manipulating the DOM.\r\n"},"comment":{"url":"https://api.github.com/repos/DeloitteDigitalAPAC/react-habitat/issues/comments/390044747","html_url":"https://github.com/DeloitteDigitalAPAC/react-habitat/issues/36#issuecomment-390044747","issue_url":"https://api.github.com/repos/DeloitteDigitalAPAC/react-habitat/issues/36","id":390044747,"user":{"login":"jennasalau","id":11452925,"avatar_url":"https://avatars3.githubusercontent.com/u/11452925?v=4","gravatar_id":"","url":"https://api.github.com/users/jennasalau","html_url":"https://github.com/jennasalau","followers_url":"https://api.github.com/users/jennasalau/followers","following_url":"https://api.github.com/users/jennasalau/following{/other_user}","gists_url":"https://api.github.com/users/jennasalau/gists{/gist_id}","starred_url":"https://api.github.com/users/jennasalau/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jennasalau/subscriptions","organizations_url":"https://api.github.com/users/jennasalau/orgs","repos_url":"https://api.github.com/users/jennasalau/repos","events_url":"https://api.github.com/users/jennasalau/events{/privacy}","received_events_url":"https://api.github.com/users/jennasalau/received_events","type":"User","site_admin":false},"created_at":"2018-05-17T23:27:03Z","updated_at":"2018-05-17T23:27:03Z","author_association":"MEMBER","body":"Hi ImranHishaam,\r\n\r\nJensogaard is correct, that would be the most ideal way doing it. There are few other less pretty solutions I can think of:\r\n\r\n**Using the proxy prop**\r\n\r\n> Every React Habitat instance is passed in a prop named proxy, this is a reference the original dom element.\r\n\r\nSo if you put the div inside the react habitat container you could select it that way.\r\n\r\nexample:\r\n\r\n     <div data-component=\"MyComponent\">\r\n          <div>My special div</div>\r\n     </div>\r\n\r\nThen\r\n\r\n     class MyComponent extends React.Component {\r\n           constructor(props) {\r\n                super(props);\r\n                const specialDiv = props.proxy.getElementsByTagName('div')[0];\r\n                // or\r\n                // const html = props.proxy.innerHtml;\r\n           }\r\n     }\r\n\r\n**Using the ref prop**\r\n\r\nYou could use the [ref prop](https://github.com/DeloitteDigitalAPAC/react-habitat#data-r-prop-) to pass in a dom reference\r\n\r\n     <div id=\"specialDiv\">My Special div</div>\r\n    \r\n     <script>\r\n          var specialDiv = window.specialDiv = document.getElementById('specialDiv');\r\n     </script>\r\n     <div data-component=\"MyComponent\" data-r-prop-special-div=\"specialDiv\"></div>\r\n\r\nThen\r\n\r\n     class MyComponent extends React.Component {\r\n           constructor(props) {\r\n                super(props);\r\n                const specialDiv = props.specialDiv;\r\n           }\r\n     }\r\n\r\n**Using document**\r\n\r\nThere is nothing stopping you from querying the DOM straight from your component. You just need to very careful you don't manipulate DOM nodes owned by ReactDOM. This solution is not recommended unless you know what you are doing.\r\n\r\n     class MyComponent extends React.Component {\r\n           constructor(props) {\r\n                super(props);\r\n                const specialDiv = window.document..getElementById('specialDiv');\r\n                if (specialDiv) {\r\n                    //Do something with it\r\n                }\r\n           }\r\n     }\r\n\r\n----\r\n\r\nLastly, if you plan on rendering the div html you might want to use something like https://www.npmjs.com/package/html-to-react\r\n\r\n*or* of course use `<div dangerouslySetInnerHTML={{__html: '<div>My div</div>'}} />`"}}
{"actor":{"display_login":"jennasalau"}}