CODEWITHSUNDEEP
node.jsreactjsmeteor
t56k
t56k

Reputation: 6981

Meteor: sortablejs method not being called

I've got a component that when simplified looks like so:

import Sortable from 'react-sortablejs';

class App extends Component {

  constructor(props) {
    super(props);
  }

  updateItemOrder() {
    let items = this.props.items;
    items.forEach((item, index) => {
      console.log(item._id);
      console.log(index);

      updateItem.call({ _id: item._id, update: { priority: index } });
    });
  };

  render() {
    <Sortable
      tag='ul'
      className='item-list list-group'
      onChange={ this.updateItemOrder() }>
        { this.renderItems() }
    </Sortable>
  }
}

My console lists the item._id and the index on page load, but nothing happens when I drag-and-drop items in my sortable list. Changing to a <ReactSortable> component doesn't help, either (as per the docs).

Upvotes: 1

Views: 65

Answers (1)

Chaim Friedman
Chaim Friedman

Reputation: 6253

From your above code specifically this part here,

updateItemOrder() {
    let items = this.props.items;
    items.forEach((item, index) => {
      console.log(item._id);
      console.log(index);

      updateItem.call({ _id: item._id, update: { priority: index } });
    });
  };

It would seem that you are trying to mutate props which is a no go in react. To cause a re-render in react, you need to update state and tell react this change is state should cause a re-render. This is done using setState. There 2 options that come to mind right of the bat. First you can capture your props in the local state of this component and update that, or you can call a method back in your parent component to update its state forcing it to re-render.

Upvotes: 1

Related Questions