{"action":"created","issue":{"url":"https://api.github.com/repos/mWater/react-library/issues/5","labels_url":"https://api.github.com/repos/mWater/react-library/issues/5/labels{/name}","comments_url":"https://api.github.com/repos/mWater/react-library/issues/5/comments","events_url":"https://api.github.com/repos/mWater/react-library/issues/5/events","html_url":"https://github.com/mWater/react-library/pull/5","id":121843807,"number":5,"title":"nested modals using react-overlays","user":{"login":"broncha","id":46905,"avatar_url":"https://avatars.githubusercontent.com/u/46905?v=3","gravatar_id":"","url":"https://api.github.com/users/broncha","html_url":"https://github.com/broncha","followers_url":"https://api.github.com/users/broncha/followers","following_url":"https://api.github.com/users/broncha/following{/other_user}","gists_url":"https://api.github.com/users/broncha/gists{/gist_id}","starred_url":"https://api.github.com/users/broncha/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/broncha/subscriptions","organizations_url":"https://api.github.com/users/broncha/orgs","repos_url":"https://api.github.com/users/broncha/repos","events_url":"https://api.github.com/users/broncha/events{/privacy}","received_events_url":"https://api.github.com/users/broncha/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":4,"created_at":"2015-12-12T09:16:51Z","updated_at":"2015-12-12T13:26:35Z","closed_at":null,"pull_request":{"url":"https://api.github.com/repos/mWater/react-library/pulls/5","html_url":"https://github.com/mWater/react-library/pull/5","diff_url":"https://github.com/mWater/react-library/pull/5.diff","patch_url":"https://github.com/mWater/react-library/pull/5.patch"},"body":"Please check the functionality, if thats good, Ill cleanup.\r\n"},"comment":{"url":"https://api.github.com/repos/mWater/react-library/issues/comments/164150503","html_url":"https://github.com/mWater/react-library/pull/5#issuecomment-164150503","issue_url":"https://api.github.com/repos/mWater/react-library/issues/5","id":164150503,"user":{"login":"broncha","id":46905,"avatar_url":"https://avatars.githubusercontent.com/u/46905?v=3","gravatar_id":"","url":"https://api.github.com/users/broncha","html_url":"https://github.com/broncha","followers_url":"https://api.github.com/users/broncha/followers","following_url":"https://api.github.com/users/broncha/following{/other_user}","gists_url":"https://api.github.com/users/broncha/gists{/gist_id}","starred_url":"https://api.github.com/users/broncha/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/broncha/subscriptions","organizations_url":"https://api.github.com/users/broncha/orgs","repos_url":"https://api.github.com/users/broncha/repos","events_url":"https://api.github.com/users/broncha/events{/privacy}","received_events_url":"https://api.github.com/users/broncha/received_events","type":"User","site_admin":false},"created_at":"2015-12-12T13:26:35Z","updated_at":"2015-12-12T13:26:35Z","body":"Yes, got that. I was thinking of that as a wrapper component with the\ntrigger and the modal both inside that. Ill clean it up.\nOn Dec 12, 2015 7:06 PM, \"grassick\" <notifications@github.com> wrote:\n\n> In general, React stuff should be stateless. Even the textbox just has a\n> value and an onChange event and doesn't store state internally.\n>\n> For the modals, the component that contains it will hold the state as to\n> whether to display the modal or not. That way, it can decide whether to\n> close the modal when the user clicks outside of it, for example. Doing it\n> this way makes a lot fewer assumptions about how it can be used.\n>\n> Here's an example:\n>\n> class EditValueComponent extends React.Component\n>   contructor: ->\n>     super\n>     @state = {\n>       editingValue: null\n>     }\n>\n>   handleStartEditing: =>\n>     @setState(editingValue: @props.value)\n>\n>   handleFinishEditing: =>\n>     # Decide if we want to keep value/close modal\n>     # Maybe do some validation of @state.editingValue\n>     @props.onChange(@state.editingValue)\n>     @setState(editingValue: null)\n>\n>   render: ->\n>     H.div null,\n>       if @state.editingValue\n>         React.createElement(Modal,\n>           onClose: @handleFinishEditing,\n>           React.createElement(SomeOtherEditingComponent,\n>             value: @state.editingValue\n>             onChange: (val) => @setState(editingValue: val)\n>           )\n>         )\n>\n>       H.button onClick: @handleStartEditing, \"Click to Edit\"\n>\n> In this way, the state is really clear and is in one place. If\n> editingValue is set, we're editing and keeping track of the value being\n> edited. We have full control over whether to allow the modal to be\n> dismissed and can do other checks when it's requested.\n>\n> Does that make sense? Moving state to upper components is one of the\n> trickiest things to get about React but it makes everything so very much\n> simpler.\n>\n> —\n> Reply to this email directly or view it on GitHub\n> <https://github.com/mWater/react-library/pull/5#issuecomment-164149297>.\n>\n"}}