question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

index is undefined in SortableElement v 0.4.10

See original GitHub issue

Hello, 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:closed
  • Created 7 years ago
  • Reactions:6
  • Comments:13 (1 by maintainers)

github_iconTop GitHub Comments

10reactions
supernintendocommented, Sep 5, 2019

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.

2reactions
mguidetticommented, Dec 1, 2019

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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found