{"action":"closed","issue":{"url":"https://api.github.com/repos/clauderic/react-sortable-hoc/issues/373","repository_url":"https://api.github.com/repos/clauderic/react-sortable-hoc","labels_url":"https://api.github.com/repos/clauderic/react-sortable-hoc/issues/373/labels{/name}","comments_url":"https://api.github.com/repos/clauderic/react-sortable-hoc/issues/373/comments","events_url":"https://api.github.com/repos/clauderic/react-sortable-hoc/issues/373/events","html_url":"https://github.com/clauderic/react-sortable-hoc/issues/373","id":322630781,"number":373,"title":"Issue integrating the basic example with Redux","user":{"login":"NickEmpetvee","id":38371007,"avatar_url":"https://avatars1.githubusercontent.com/u/38371007?v=4","gravatar_id":"","url":"https://api.github.com/users/NickEmpetvee","html_url":"https://github.com/NickEmpetvee","followers_url":"https://api.github.com/users/NickEmpetvee/followers","following_url":"https://api.github.com/users/NickEmpetvee/following{/other_user}","gists_url":"https://api.github.com/users/NickEmpetvee/gists{/gist_id}","starred_url":"https://api.github.com/users/NickEmpetvee/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/NickEmpetvee/subscriptions","organizations_url":"https://api.github.com/users/NickEmpetvee/orgs","repos_url":"https://api.github.com/users/NickEmpetvee/repos","events_url":"https://api.github.com/users/NickEmpetvee/events{/privacy}","received_events_url":"https://api.github.com/users/NickEmpetvee/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":1,"created_at":"2018-05-13T22:00:06Z","updated_at":"2018-05-14T20:59:52Z","closed_at":"2018-05-14T20:59:52Z","author_association":"NONE","body":"I need the sortable drag/drop component to be able to re-render with new values upon a user's row click click from another container and still retain drag/drop functionality. If the list contains [a, b, c] at first I need it to still work when they user clicks a button that would re-render the list as [d, e, f, g], for example.\r\n\r\nEverything works fine with drag/drop if I don't change the value of items[]. Additionally if redux changes the value of items[] in render(), the new list properly renders. However the drag/drop fails. It looks like it will work when dragging; the selected element moves and the target location looks like it will accept it but onMouseRelease everything snaps back to the original.\r\n\r\nBelow is the basic code example for react-sortable-hoc and includes my update this.state.items in render():\r\n\r\n```\r\nimport React, { Component } from 'react';\r\nimport {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';\r\nimport { connect } from 'react-redux';\r\n\r\nconst SortableItem = SortableElement(({value}) =>\r\n  <li>{value}</li>\r\n);\r\n\r\nconst SortableList = SortableContainer(({items}) => {\r\n    return (\r\n        <ul>\r\n        {items.map((value, index) => (\r\n            <SortableItem key={`item-${index}`} index={index} value={value} />\r\n        ))}\r\n        </ul>\r\n    );\r\n});\r\n\r\nclass SelectedRow extends Component\r\n{\r\n    state = {\r\n        items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6'],\r\n      };\r\n\r\n    onSortEnd = ({oldIndex, newIndex}) => {\r\n        this.setState({\r\n                items: arrayMove(this.state.items, oldIndex, newIndex)\r\n        });\r\n        console.log('p1: ' + this.state.items[0]);\r\n        console.log('p2: ' + this.state.items[1]);\r\n        console.log('p3: ' + this.state.items[2]);\r\n    };\r\n\r\n    render()\r\n    {\r\n        // If user has not yet selected a node, return instructions.\r\n        if (!this.props.selectedKnowledge)\r\n        {\r\n            return <div>Select a knowledge node to get started.</div>;\r\n        }\r\n\r\n        // MY UPDATE - CHANGE ITEMS[] ARRAY WITH THE NEW VALUES! \r\n        this.state.items  =  [this.props.selectedItems.node.title,\r\n                        this.props.selectedItems.node.subtitle,\r\n                        this.props.selectedItems.treeIndex];\r\n\r\n        return <SortableList items={this.state.items} onSortEnd={this.onSortEnd} />;\r\n      }\r\n}\r\n\r\n\r\nfunction mapStateToProps(state)\r\n{\r\n    return {\r\n        selectedItem: state.activeBrowserNode\r\n    };\r\n}\r\n\r\nexport default connect(mapStateToProps)(SelectedRow);\r\n```"}}
{"actor":{"display_login":"NickEmpetvee"}}