{"action":"created","issue":{"url":"https://api.github.com/repos/twisty/formsy-react-components/issues/82","repository_url":"https://api.github.com/repos/twisty/formsy-react-components","labels_url":"https://api.github.com/repos/twisty/formsy-react-components/issues/82/labels{/name}","comments_url":"https://api.github.com/repos/twisty/formsy-react-components/issues/82/comments","events_url":"https://api.github.com/repos/twisty/formsy-react-components/issues/82/events","html_url":"https://github.com/twisty/formsy-react-components/issues/82","id":165895048,"number":82,"title":"Passing react element as label causes \"Converting circular structure to JSON\" error.","user":{"login":"tappleby","id":1435253,"avatar_url":"https://avatars.githubusercontent.com/u/1435253?v=3","gravatar_id":"","url":"https://api.github.com/users/tappleby","html_url":"https://github.com/tappleby","followers_url":"https://api.github.com/users/tappleby/followers","following_url":"https://api.github.com/users/tappleby/following{/other_user}","gists_url":"https://api.github.com/users/tappleby/gists{/gist_id}","starred_url":"https://api.github.com/users/tappleby/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tappleby/subscriptions","organizations_url":"https://api.github.com/users/tappleby/orgs","repos_url":"https://api.github.com/users/tappleby/repos","events_url":"https://api.github.com/users/tappleby/events{/privacy}","received_events_url":"https://api.github.com/users/tappleby/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2016-07-15T23:29:47Z","updated_at":"2016-07-18T08:54:34Z","closed_at":null,"body":"This is similar to #33, I am trying to use react-intl components for translating the form labels, but the issue will happen for any react element:\r\n\r\n```\r\n<Input\r\n  name=\"testInput\"\r\n  label={\r\n    <FormattedMessage\r\n      id=\"testInput.label\"\r\n      defaultMessage=\"Member Type\"\r\n    />\r\n  }\r\n/>\r\n```\r\n\r\nThis issue is caused by the `JSON.stringify(label)` in the [component.getId mixin](https://github.com/twisty/formsy-react-components/blob/master/src/mixins/component.js#L126)\r\n\r\nI have a few ideas around fixing this, but not sure the best approach to take:\r\n\r\n1. Only try and hash label if `React.isValidElement` returns `false`\r\n2. Dont include the label when generating the id.\r\n3. Require input label prop type to be string, use alternate method to get translation.\r\n\r\nIt would be nice if we could generate a unique id for each `Formsy.Form` component, then hashing the label wouldnt be necessary. Was thinking we could maybe opt into this using the parent context mixin. "},"comment":{"url":"https://api.github.com/repos/twisty/formsy-react-components/issues/comments/233276877","html_url":"https://github.com/twisty/formsy-react-components/issues/82#issuecomment-233276877","issue_url":"https://api.github.com/repos/twisty/formsy-react-components/issues/82","id":233276877,"user":{"login":"twisty","id":16244,"avatar_url":"https://avatars.githubusercontent.com/u/16244?v=3","gravatar_id":"","url":"https://api.github.com/users/twisty","html_url":"https://github.com/twisty","followers_url":"https://api.github.com/users/twisty/followers","following_url":"https://api.github.com/users/twisty/following{/other_user}","gists_url":"https://api.github.com/users/twisty/gists{/gist_id}","starred_url":"https://api.github.com/users/twisty/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/twisty/subscriptions","organizations_url":"https://api.github.com/users/twisty/orgs","repos_url":"https://api.github.com/users/twisty/repos","events_url":"https://api.github.com/users/twisty/events{/privacy}","received_events_url":"https://api.github.com/users/twisty/received_events","type":"User","site_admin":false},"created_at":"2016-07-18T08:54:34Z","updated_at":"2016-07-18T08:54:34Z","body":"Hi @tappleby -- thanks for your report and summary of approaches, that is helpful.\r\n\r\nYou may know already, but you can manually pass in an `id` prop and it will use that instead of generating an ID."}}
{"actor":{"display_login":"twisty"}}