index is undefined in SortableElement v 0.4.10
See original GitHub issueHello, I updated to version 0.4.10 and now when I try to access index prop inside my SortableElement it is undefined, in the meantime I will return to previous version where everything is fine.
const SortableItem = SortableElement((props) => {
const {name, fields, index} = props;
if(fields.get(index).type == 'error'){
return(
<div className="file-upload-file-container file-container-error">
{fields.get(index).file.name}
</div>
)
} else{
return (
<div className="file-upload-file-container">
{fields.get(index).file.name}
</div>
)
}
});
const SortableList=SortableContainer(({fields, onDeleteItem})=>{
return (
<div className="">
{fields.map((name, index, fields) => {
return(
<SortableItem
key={`item-${index}`}
name={name}
index={index}
fields={fields}
>
</SortableItem>
)
})}
</div>
)
})
Issue Analytics
- State:
- Created 7 years ago
- Reactions:6
- Comments:13 (1 by maintainers)
Top Results From Across the Web
Passing arguments to React component using ES6
If you look at the source for react-sortable-hoc , you'll see that when passing props in the render, index is omitted.
Read more >react-sortable-hoc - npm
Set of higher-order components to turn any list into a sortable, touch-friendly, animated list. Latest version: 2.0.0, last published: 2 ...
Read more >React Sortable HOC - JSFiddle - Code Playground
var {SortableContainer, SortableElement, arrayMove} = window.SortableHOC; ... <SortableItem key={`item-${index}`} index={index} value={value} />.
Read more >react-sortable-hoc | A set of higher-order components to turn ...
react-sortable-hoc is a JavaScript library typically used in User Interface, Frontend Framework, React applications. react-sortable-hoc has no bugs, ...
Read more >changelogs.md · weijiadongyy/react-sortable-hoc release history
Fix: TouchEvent is undefined in certain browsers, such as Safari #382 ... 0.4.10. Fix: This version fixes issues with nested ...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Why was this closed? This is some pretty janky behavior that at the very least should be documented. Thought I was going crazy until I realized it’s a bug in this library. Ended up taking your suggestion @clauderic of passing the index as a separate prop.
I also ran into this problem and was very confused until finding this issue. I’ve implemented the work around of passing the index as an additional separate prop, but I agree with others that this feels unintuitive maybe not the best behavior.