I'm currently trying to add react-sortable-hoc to a list component and I'm running into a number of bugs when I change the incoming list of items via props. For example: if I add an item to the array, and I check the incoming props for the list, the props in the sortable component are changing (I see the new item in the list component props), but I can't get the component to re-render. I've tried shouldComponentUpdate, getDerivedStateFromProps, using PureComponent instead of Component, forceUpdate, hookifying the whole thing and setting up a useEffect for any change in props, nothing is causing a rerender and I know that the new list is getting to the component.
Is anyone else having this same problem or has anyone found a way around it?
here's how I'm setting props/state, and how I know the props are changing:
class MobileListItems extends Component {
state = {
items: this.props.listItems,
}
.
.
.
render() {
console.log('this.props.listItems', this.props.listItems)
console.log('this.state.items', this.state.items)
after I sort a few things, and try to add another item, this.props.listItems is incremented by 1, but no rerender no matter which method above I've tried.
OOOPSIE DAISY! Don't copy your props into state, y'all. Don't be like me!
removing state management and turning this into a function fixed all the bugs I was encountering.