trailingFullSwipeAction error every time I attempt to trigger a trailing swipe

[TainedeBlaze]

Describe the bug I have implemented the react swipeable list component within a comments list on a basic react web application I am building, each time i attempt to swipe right on a comment to delete it, on my localhost I trigger an uncaught runtime error, this is attached below: react-swipeable-list.umd.js:672 Uncaught TypeError: _this.trailingFullSwipeAction is not a function at SwipeableListItem.handleDragEnd (react-swipeable-list.umd.js:672:1) at HTMLDivElement. (react-swipeable-list.umd.js:481:1)

To Reproduce Here is the code of the implementation:

const trailingActions = () => (
        <TrailingActions>
          <SwipeAction
            destructive={true}
            onClick={() => console.info("swipe action triggered")}
          >
            Delete
          </SwipeAction>
        </TrailingActions>
      );

        const HandleDeleteComment = (comment: string) => {
        console.log("deleting comment"); 
        };  
<div id="comments" >
        <SwipeableList threshold={0.25}  >
  {comments.map((item, index) => (
            <SwipeableListItem
            key={index}
            trailingActions={
                item.user === me.name ? (
                <TrailingActions>
                    <div className="swipeActionDelete">
                    <SwipeAction
                        destructive={true}
                        onClick={() => HandleDeleteComment(item.comment)}
                    >
                        Delete
                    </SwipeAction>
                    </div>
                </TrailingActions>
                ) : null
            }
            >
            <ArtworkComment comment={item} />
            </SwipeableListItem>
        ))}
        </SwipeableList>
            </div>

I expect the above code to allow a user to swipe to the left on any comment they have made and be able to delete that comment. A call to the backend would be made in the handle delete comment function, but that has not yet been implemented

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version 115.0.5790.110

Additional context I had based my code off of the npm docs available at https://www.npmjs.com/package/react-swipeable-list and cannot see this trailingFullSwipeAction property anywhere... any help would be greatly appreciated

[marekrozmus]

@TainedeBlaze The problem is the structure that you are using:

<TrailingActions>
  <div className="swipeActionDelete">
    <SwipeAction destructive={true} onClick={() => HandleDeleteComment(item.comment)}>
      Delete
    </SwipeAction>
  </div>
</TrailingActions>

You shouldn't use div inside the TrailingActions - only SwipeAction can be child of TrailingActions:

<TrailingActions>
  <SwipeAction destructive={true} onClick={() => HandleDeleteComment(item.comment)}>
    Delete
  </SwipeAction>
</TrailingActions>