onModalClosed returns object instead of option when selecting cancel

[mrtwebdesign]

If I close the modal with the cancel button, onCloseModal returns unexpected output. For now I'm working around it by doing something like this:

onModalClose={(option) => {
    if (option?.key) {
      this._handleOption(option);
    }
  }
}

when cancel is selected, onCloseModal returns:

{"_dispatchInstances": {"_debugHookTypes": null, "_debugID": 826637, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": null, "_debugID": 826633, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 1, "elementType": [Object], "expirationTime": 0, "firstEffect": [Circular], "index": 0, "key": null, "lastEffect": [Circular], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Function forwardRef], "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": null, "tag": 11, "treeBaseDuration": 0, "type": [Object], "updateQueue": null}, "debugSource": {"columnNumber": 7, "fileName": "-- content removed for privacy --_", "lineNumber": 34}, "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": {"_debugHookTypes": null, "_debugID": 826639, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 1, "elementType": [Object], "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [Circular], "selfBaseDuration": 0, "sibling": [FiberNode], "stateNode": null, "tag": 11, "treeBaseDuration": 0, "type": [Object], "updateQueue": null}, "childExpirationTime": 0, "dependencies": null, "effectTag": 128, "elementType": "RCTView", "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": "", "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": undefined, "accessibilityValue": undefined, "accessibilityViewIsModal": undefined, "accessible": false, "children": [Array], "collapsable": undefined, "focusable": true, "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "style": [Object], "testID": undefined}, "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": "", "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": undefined, "accessibilityValue": undefined, "accessibilityViewIsModal": undefined, "accessible": false, "children": [Array], "collapsable": undefined, "focusable": true, "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "style": [Object], "testID": undefined}, "ref": [Function forwardRef], "return": {"_debugHookTypes": null, "_debugID": 826635, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [Circular], "childExpirationTime": 0, "dependencies": null, "effectTag": 0, "elementType": [Object], "expirationTime": 0, "firstEffect": [Circular], "index": 0, "key": null, "lastEffect": [Circular], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": null, "tag": 10, "treeBaseDuration": 0, "type": [Object], "updateQueue": null}, "selfBaseDuration": 0, "sibling": null, "stateNode": {"_children": [Array], "_internalFiberInstanceHandleDEV": [Circular], "_nativeTag": 5087, "getNode": [Function anonymous], "viewConfig": [Object]}, "tag": 5, "treeBaseDuration": 0, "type": "RCTView", "updateQueue": null}, "_dispatchListeners": [Function onResponderRelease], "_targetInst": {"_debugHookTypes": null, "_debugID": 826637, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": {"_debugHookTypes": null, "_debugID": 826633, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 1, "elementType": [Object], "expirationTime": 0, "firstEffect": [Circular], "index": 0, "key": null, "lastEffect": [Circular], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Function forwardRef], "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": null, "tag": 11, "treeBaseDuration": 0, "type": [Object], "updateQueue": null}, "debugSource": {"columnNumber": 7, "fileName": "-- content removed for privacy --_", "lineNumber": 34}, "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": {"_debugHookTypes": null, "_debugID": 826639, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 1, "elementType": [Object], "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [Circular], "selfBaseDuration": 0, "sibling": [FiberNode], "stateNode": null, "tag": 11, "treeBaseDuration": 0, "type": [Object], "updateQueue": null}, "childExpirationTime": 0, "dependencies": null, "effectTag": 128, "elementType": "RCTView", "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": "", "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": undefined, "accessibilityValue": undefined, "accessibilityViewIsModal": undefined, "accessible": false, "children": [Array], "collapsable": undefined, "focusable": true, "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "style": [Object], "testID": undefined}, "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": {"accessibilityActions": undefined, "accessibilityElementsHidden": undefined, "accessibilityHint": undefined, "accessibilityLabel": "", "accessibilityLiveRegion": undefined, "accessibilityRole": undefined, "accessibilityState": undefined, "accessibilityValue": undefined, "accessibilityViewIsModal": undefined, "accessible": false, "children": [Array], "collapsable": undefined, "focusable": true, "hasTVPreferredFocus": undefined, "hitSlop": undefined, "importantForAccessibility": undefined, "nativeID": undefined, "nextFocusDown": undefined, "nextFocusForward": undefined, "nextFocusLeft": undefined, "nextFocusRight": undefined, "nextFocusUp": undefined, "onAccessibilityAction": undefined, "onClick": [Function onClick], "onLayout": undefined, "onResponderGrant": [Function onResponderGrant], "onResponderMove": [Function onResponderMove], "onResponderRelease": [Function onResponderRelease], "onResponderTerminate": [Function onResponderTerminate], "onResponderTerminationRequest": [Function onResponderTerminationRequest], "onStartShouldSetResponder": [Function onStartShouldSetResponder], "style": [Object], "testID": undefined}, "ref": [Function forwardRef], "return": {"_debugHookTypes": null, "_debugID": 826635, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [Circular], "childExpirationTime": 0, "dependencies": null, "effectTag": 0, "elementType": [Object], "expirationTime": 0, "firstEffect": [Circular], "index": 0, "key": null, "lastEffect": [Circular], "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": null, "tag": 10, "treeBaseDuration": 0, "type": [Object], "updateQueue": null}, "selfBaseDuration": 0, "sibling": null, "stateNode": {"_children": [Array], "_internalFiberInstanceHandleDEV": [Circular], "_nativeTag": 5087, "getNode": [Function anonymous], "viewConfig": [Object]}, "tag": 5, "treeBaseDuration": 0, "type": "RCTView", "updateQueue": null}, "bubbles": undefined, "cancelable": undefined, "currentTarget": {"_children": [[ReactNativeFiberHostComponent]], "_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugID": 826637, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 128, "elementType": "RCTView", "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": [Function forwardRef], "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": [Circular], "tag": 5, "treeBaseDuration": 0, "type": "RCTView", "updateQueue": null}, "_nativeTag": 5087, "getNode": [Function anonymous], "viewConfig": {"Commands": [Object], "bubblingEventTypes": [Object], "directEventTypes": [Object], "uiViewClassName": "RCTView", "validAttributes": [Object]}}, "defaultPrevented": undefined, "dispatchConfig": {"dependencies": ["topTouchCancel", "topTouchEnd"], "registrationName": "onResponderRelease"}, "eventPhase": undefined, "isDefaultPrevented": [Function functionThatReturnsFalse], "isPropagationStopped": [Function functionThatReturnsFalse], "isTrusted": undefined, "nativeEvent": {"changedTouches": [[Circular]], "force": 0, "identifier": 1, "locationX": 156.5, "locationY": 13, "pageX": 183.5, "pageY": 475.5, "target": 5083, "timestamp": 1915278512.82747, "touches": []}, "target": {"_children": [5079], "_internalFiberInstanceHandleDEV": {"_debugHookTypes": null, "_debugID": 826654, "_debugIsCurrentlyTiming": false, "_debugNeedsRemount": false, "_debugOwner": [FiberNode], "_debugSource": [Object], "actualDuration": 0, "actualStartTime": 2616434, "alternate": null, "child": [FiberNode], "childExpirationTime": 0, "dependencies": null, "effectTag": 0, "elementType": "RCTText", "expirationTime": 0, "firstEffect": null, "index": 0, "key": null, "lastEffect": null, "memoizedProps": [Object], "memoizedState": null, "mode": 8, "nextEffect": null, "pendingProps": [Object], "ref": null, "return": [FiberNode], "selfBaseDuration": 0, "sibling": null, "stateNode": [Circular], "tag": 5, "treeBaseDuration": 0, "type": "RCTText", "updateQueue": null}, "_nativeTag": 5083, "viewConfig": {"directEventTypes": [Object], "uiViewClassName": "RCTText", "validAttributes": [Object]}}, "timeStamp": 1636772200923, "touchHistory": {"indexOfSingleActiveTouch": 1, "mostRecentTimeStamp": 1915278512.82747, "numberActiveTouches": 0, "touchBank": [undefined, [Object]]}, "type": undefined}

[nbarshain]

Great workaround! Worked like a charm for me

Actually one fix: If you press the first item on the list, it will return a key of 0, which JS interprets as false, so it won't run that function. Instead, you should check if 'key' exists in option, like this: if ('key' in option) {...}