{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/3365","labels_url":"https://api.github.com/repos/facebook/react/issues/3365/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/3365/comments","events_url":"https://api.github.com/repos/facebook/react/issues/3365/events","html_url":"https://github.com/facebook/react/issues/3365","id":60562203,"number":3365,"title":"Unable to render component from name string","user":{"login":"charliegeiger89","id":2603454,"avatar_url":"https://avatars.githubusercontent.com/u/2603454?v=3","gravatar_id":"","url":"https://api.github.com/users/charliegeiger89","html_url":"https://github.com/charliegeiger89","followers_url":"https://api.github.com/users/charliegeiger89/followers","following_url":"https://api.github.com/users/charliegeiger89/following{/other_user}","gists_url":"https://api.github.com/users/charliegeiger89/gists{/gist_id}","starred_url":"https://api.github.com/users/charliegeiger89/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/charliegeiger89/subscriptions","organizations_url":"https://api.github.com/users/charliegeiger89/orgs","repos_url":"https://api.github.com/users/charliegeiger89/repos","events_url":"https://api.github.com/users/charliegeiger89/events{/privacy}","received_events_url":"https://api.github.com/users/charliegeiger89/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":6,"created_at":"2015-03-10T20:18:37Z","updated_at":"2015-03-10T20:55:54Z","closed_at":"2015-03-10T20:26:26Z","body":"I seem to be unable to render components using name strings. I wanted to be able to dynamically generate component name strings which have existing corresponding components that can be rendered.\r\n\r\nFiddle: http://jsfiddle.net/dhjxu5oL/\r\n\r\nInstead of referencing the existing component and rendering it, React is rendering a custom element tag that is all lower case.\r\n\r\n```\r\n// HTML output\r\n<componentname></componentname>\r\n```\r\n\r\n***\r\nVery basic code that is failing:\r\n\r\n```\r\n// Main component to be rendered\r\nvar Parent = React.createClass({\r\n\r\n    render: function() {\r\n        var ChildName = 'Child';\r\n        return (\r\n            <ChildName />\r\n        );\r\n    }\r\n\r\n});\r\n\r\n// Dynamic subcomponent render\r\nvar Child = React.createClass({\r\n\r\n    render: function() {\r\n        return (\r\n            <div>\r\n                I am Child!\r\n            </div>\r\n        );\r\n    }\r\n\r\n});\r\n\r\nReact.render(\r\n    <Parent/>,\r\n    document.body\r\n);\r\n```"},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/78146211","html_url":"https://github.com/facebook/react/issues/3365#issuecomment-78146211","issue_url":"https://api.github.com/repos/facebook/react/issues/3365","id":78146211,"user":{"login":"spicyj","id":6820,"avatar_url":"https://avatars.githubusercontent.com/u/6820?v=3","gravatar_id":"","url":"https://api.github.com/users/spicyj","html_url":"https://github.com/spicyj","followers_url":"https://api.github.com/users/spicyj/followers","following_url":"https://api.github.com/users/spicyj/following{/other_user}","gists_url":"https://api.github.com/users/spicyj/gists{/gist_id}","starred_url":"https://api.github.com/users/spicyj/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/spicyj/subscriptions","organizations_url":"https://api.github.com/users/spicyj/orgs","repos_url":"https://api.github.com/users/spicyj/repos","events_url":"https://api.github.com/users/spicyj/events{/privacy}","received_events_url":"https://api.github.com/users/spicyj/received_events","type":"User","site_admin":false},"created_at":"2015-03-10T20:55:53Z","updated_at":"2015-03-10T20:55:53Z","body":"As you probably know, it's best practice not to use `eval` or look up globals on `window` by string name as it tends to make code hard to reason about, but you can use those patterns with React too:\r\n\r\n```\r\nvar name = 'Component' + this.props.componentID;\r\nvar Component = window[name];  // or eval(name)\r\nreturn <Component />;\r\n```\r\n\r\nThe key is to use a capitalized variable name (`Component`) or else React will treat it as a built-in DOM element."}}