Doesn't work with mapped SortableItems

[dijs]

This works:

render() {
  return <Sortable>
      <DemoHOCItem className="item-1" sortData="react" key={1}>
        React
      </DemoHOCItem>
     <DemoHOCItem className="item-2" sortData="angular" key={2}>
        Angular
      </DemoHOCItem>
    </Sortable>
}

This doesnt:

function renderItem(n, index) {
return <DemoHOCItem
      className={'item-' + index}
      sortData={n}
      key={index}>{n}</DemoHOCItem>
}

render() {
  return <Sortable>
     {items.map(renderItem)}
 </Sortable>
}

And by doesn't work, I mean nothing is rendered within sortable.

If I render the {items.map(renderItem)} outside of <Sortable>, it works...

Very odd.

[jasonslyvia]

I've tweaked the demo to return mapped items and it just works, please check it out.

https://github.com/jasonslyvia/react-anything-sortable/blob/0867f1460dd560570d61511432564a1ea100e6bc/demo/index.js#L92

[dijs]

Okay the issue lies within using redux. Still a mystery. But I made a project which shows the issue.

example.zip

Install and run with:

npm install
npm start
open http://localhost:3000

Just try clicking the "+1" button a few times which calls a redux action which increments the counter.

The counter is obviously working, but for some reason, Sortable is not rendering the components.

Thanks

[jasonslyvia]

If you're adding or removing children of Sortable dynamically, you should add a different key to <Sortable> every time children change.

Check the notice section of docs for more information.

https://github.com/jasonslyvia/react-anything-sortable#notice

[jasonslyvia]

Also you can refer to this demo for handling dynamic children modification.

[JonathanWi]

@jasonslyvia There is a bug on an edge case (tried with your updated demo also): Mapped items + fixed items breaks the dragging capabilities. I'm not sure why, currently investigating, but could use your help on this one!

Just try to add a fixed item in your demo, and you will see what's happening :)

Cheers

[jasonslyvia]

Sure, I'll look into it.

[JonathanWi]

Thanks!

In the render function, you can try this:

<div className="dynamic-demo">
        <button onClick={::this.handleAddElement}>Add 1 element</button>
        <Sortable key={this._sortableKey} onSort={::this.handleSort}>
          {this.state.arr.map(renderItem, this)}
          <span>Hello</span>
        </Sortable>
      </div>

Let me know what you think

[jasonslyvia]

Have you tried add dynamic props to <Sortable>?

[JonathanWi]

@jasonslyvia Yes, no luck either

[jasonslyvia]

Also removing key?

[JonathanWi]

@jasonslyvia Same thing :)

[jasonslyvia]

Alright then, I will test it myself.

[JonathanWi]

@jasonslyvia Any news on this? Thanks!

[jasonslyvia]

@JonathanWi Sorry been busy these days, this behaviour is confirmed not working as expected, gonna need more time digging why.

[jasonslyvia]

Btw, I think it's a totally different issue from the original one, do you care posting a new issue so we can move discussion there?