{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/6253","repository_url":"https://api.github.com/repos/facebook/react","labels_url":"https://api.github.com/repos/facebook/react/issues/6253/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/6253/comments","events_url":"https://api.github.com/repos/facebook/react/issues/6253/events","html_url":"https://github.com/facebook/react/issues/6253","id":140407034,"number":6253,"title":"Feature Request: innerHTML alternative","user":{"login":"DylanPiercey","id":4985201,"avatar_url":"https://avatars.githubusercontent.com/u/4985201?v=3","gravatar_id":"","url":"https://api.github.com/users/DylanPiercey","html_url":"https://github.com/DylanPiercey","followers_url":"https://api.github.com/users/DylanPiercey/followers","following_url":"https://api.github.com/users/DylanPiercey/following{/other_user}","gists_url":"https://api.github.com/users/DylanPiercey/gists{/gist_id}","starred_url":"https://api.github.com/users/DylanPiercey/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DylanPiercey/subscriptions","organizations_url":"https://api.github.com/users/DylanPiercey/orgs","repos_url":"https://api.github.com/users/DylanPiercey/repos","events_url":"https://api.github.com/users/DylanPiercey/events{/privacy}","received_events_url":"https://api.github.com/users/DylanPiercey/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":21,"created_at":"2016-03-12T18:55:40Z","updated_at":"2016-07-27T12:52:25Z","closed_at":null,"body":"I think many people agree that the `dangerouslySetInnerHTML={{ __html: ... }}` api is gross even though there is great reasoning behind it.\r\n\r\nI have a few issues with it beyond it's verbosity that I think could be added as static method on the react class.\r\n\r\n#### My Issues with `dangerouslySetInnerHTML`:\r\n\r\n1) Verbose and not always dangerous.\r\n2) Can't mix safe and unsafe html.\r\n3) Can't mix html with react elements.\r\n4) Have to manually concat html strings.\r\n\r\n---\r\n\r\nA better solution would be to provide a way to mark html as \"safe\".\r\n\r\n```js\r\nvar React = require(\"react\");\r\n\r\n// Use #markSafe method to bypass reacts automatic html escaping.\r\nvar myReactEl = <div>{ React.markSafe(\"<br/>\") }</div>;\r\n```\r\n\r\nThis is still explicitly telling react that we trust the html but solves all of the problems above.\r\n\r\n```js\r\n// Mixing safe and unsafe html.\r\n(\r\n    <div>\r\n        { React.markSafe(\"<br/>\") }\r\n        { \"<br/>\" }\r\n    </div>\r\n);\r\n\r\n// Mixing html with react elements.\r\n(\r\n    <div>\r\n        { React.markSafe(\"<br/>\") }\r\n        <span>Hello!</span>\r\n    </div>\r\n);\r\n\r\n// Multiple innerHTML sets.\r\n(\r\n    <div>\r\n        { React.markSafe(\"<br/>\") }\r\n        { React.markSafe(\"<hr/>\") }\r\n    </div>\r\n);\r\n```\r\n\r\nI think this api would be much friendlier than the current html api and probably wouldn't even require a major version bump.\r\n\r\nThoughts?"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/235575368","html_url":"https://github.com/facebook/react/issues/6253#issuecomment-235575368","issue_url":"https://api.github.com/repos/facebook/react/issues/6253","id":235575368,"user":{"login":"syranide","id":1714255,"avatar_url":"https://avatars.githubusercontent.com/u/1714255?v=3","gravatar_id":"","url":"https://api.github.com/users/syranide","html_url":"https://github.com/syranide","followers_url":"https://api.github.com/users/syranide/followers","following_url":"https://api.github.com/users/syranide/following{/other_user}","gists_url":"https://api.github.com/users/syranide/gists{/gist_id}","starred_url":"https://api.github.com/users/syranide/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/syranide/subscriptions","organizations_url":"https://api.github.com/users/syranide/orgs","repos_url":"https://api.github.com/users/syranide/repos","events_url":"https://api.github.com/users/syranide/events{/privacy}","received_events_url":"https://api.github.com/users/syranide/received_events","type":"User","site_admin":false},"created_at":"2016-07-27T12:52:25Z","updated_at":"2016-07-27T12:52:25Z","body":"#7361 proof-of-concept implementation if anyone is curious"}}
{"actor":{"display_login":"syranide"}}