{"action":"created","issue":{"url":"https://api.github.com/repos/react-tools/react-table/issues/900","repository_url":"https://api.github.com/repos/react-tools/react-table","labels_url":"https://api.github.com/repos/react-tools/react-table/issues/900/labels{/name}","comments_url":"https://api.github.com/repos/react-tools/react-table/issues/900/comments","events_url":"https://api.github.com/repos/react-tools/react-table/issues/900/events","html_url":"https://github.com/react-tools/react-table/issues/900","id":312563431,"number":900,"title":"getTdProps onClick handleOriginal not allowing expandable","user":{"login":"DaKaZ","id":895892,"avatar_url":"https://avatars3.githubusercontent.com/u/895892?v=4","gravatar_id":"","url":"https://api.github.com/users/DaKaZ","html_url":"https://github.com/DaKaZ","followers_url":"https://api.github.com/users/DaKaZ/followers","following_url":"https://api.github.com/users/DaKaZ/following{/other_user}","gists_url":"https://api.github.com/users/DaKaZ/gists{/gist_id}","starred_url":"https://api.github.com/users/DaKaZ/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/DaKaZ/subscriptions","organizations_url":"https://api.github.com/users/DaKaZ/orgs","repos_url":"https://api.github.com/users/DaKaZ/repos","events_url":"https://api.github.com/users/DaKaZ/events{/privacy}","received_events_url":"https://api.github.com/users/DaKaZ/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-04-09T14:51:57Z","updated_at":"2018-04-13T23:07:26Z","closed_at":"2018-04-13T23:07:26Z","author_association":"NONE","body":"## What version of React-Table are you using?\r\n6.8.0\r\n\r\n## What bug are you experiencing, or what feature are you proposing?\r\nBUG: we have a form that is rendered above the table that allows adding/editing of data that is displayed in the table.  When a row is clicked, we set the component's local state with the information from that row.  We also have a subComponent which is displayed when the row is expanded.  When we have the local `this.setState` we do NOT get the expansion of the react table.  However, if I delay the setState with a timeout, everything works.\r\n\r\n```\r\n        <ReactTable\r\n          data={data}\r\n          columns={columns}\r\n          className=\"-striped -highlight\"\r\n          defaultPageSize={10}\r\n          freezeWhenExpanded={false}\r\n          collapseOnDataChange={false}\r\n          filterable\r\n          filtered={this.state.filtered}\r\n          onFilteredChange={(filtered) => { this.setState({ filtered }); }}\r\n          getTdProps={this._selectProject}\r\n          SubComponent={(row) => (\r\n            <Releases project={row.original} addRelease={this.props.addRelease} />\r\n          )}\r\n        />\r\n```\r\n\r\n```\r\n  _selectProject = (state, rowInfo) => ({\r\n    onClick: (e, handleOriginal) => {\r\n      if (handleOriginal) {\r\n        handleOriginal();\r\n      }\r\n      // React-table won't expand without the delay, hmmmmm\r\n      setTimeout(() => {\r\n        this.setState({\r\n          id: rowInfo.original.id,\r\n          name: rowInfo.original.name,\r\n          account_ids: rowInfo.original.accounts\r\n          && rowInfo.original.accounts.map((a) => a.id)\r\n        });\r\n      }, 50);\r\n    }\r\n  });\r\n```\r\n\r\n\r\n## Use https://codesandbox.io/s/X6npLXPRW (by clicking the \"Fork\" button) to reproduce the issue.\r\nhttps://codesandbox.io/s/jpow5j13mw\r\n\r\n## What are the steps to reproduce the issue?\r\nUsing the sandbox above...\r\nExpand one of the rows in the table.  We should see the simple label on top update AND the sub component expanded.\r\n"},"comment":{"url":"https://api.github.com/repos/react-tools/react-table/issues/comments/381281091","html_url":"https://github.com/react-tools/react-table/issues/900#issuecomment-381281091","issue_url":"https://api.github.com/repos/react-tools/react-table/issues/900","id":381281091,"user":{"login":"gary-menzel","id":5697099,"avatar_url":"https://avatars1.githubusercontent.com/u/5697099?v=4","gravatar_id":"","url":"https://api.github.com/users/gary-menzel","html_url":"https://github.com/gary-menzel","followers_url":"https://api.github.com/users/gary-menzel/followers","following_url":"https://api.github.com/users/gary-menzel/following{/other_user}","gists_url":"https://api.github.com/users/gary-menzel/gists{/gist_id}","starred_url":"https://api.github.com/users/gary-menzel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/gary-menzel/subscriptions","organizations_url":"https://api.github.com/users/gary-menzel/orgs","repos_url":"https://api.github.com/users/gary-menzel/repos","events_url":"https://api.github.com/users/gary-menzel/events{/privacy}","received_events_url":"https://api.github.com/users/gary-menzel/received_events","type":"User","site_admin":false},"created_at":"2018-04-13T23:07:26Z","updated_at":"2018-04-13T23:07:26Z","author_association":"COLLABORATOR","body":"You have a race condition with `setState` and `handleOriginal`.\r\n\r\nWhen you call `setState` it is triggering off an asynchronous change to the state of your component (and hence the state passed in to ReactTable - causing ReactTable to render again due to the state change).  So what is actually happening is `handleOriginal` is getting called first (before React processes your `setState`) and then the `setState` is triggering.\r\n\r\nIf you move the `handleOriginal` code into the a `setState` callback, you can avoid the `setTimeout` - something similar to the following:\r\n\r\n```\r\n      this.setState({ firstName: rowInfo.original.firstName },() => {\r\n        if (handleOriginal) {\r\n          handleOriginal();\r\n        }\r\n      });\r\n```\r\nThis ensures your `handleOriginal` call will not be trigger until React itself has finished the whole update cycle.\r\n\r\nI'll close this for now.  If you have any further implementation questions please head over to the react-table Slack channel (badge at the top of the README in the doco site).  Thanks.\r\n"}}
{"actor":{"display_login":"gary-menzel"}}