React function with object params throws an unexpected token

Question

I have a problem. I have the following function in React Native.

const HandleConfirmApplication = async (
  opts: { 
    isInvite: boolean,
    confirmationCheckValues: () => any,
    confirmPopUp: () => any,
    loadingApply: () => any,
    decision: () => any,
    updateState: () => any
  }
) => {
  const { 
    isInvite,
    confirmationCheckValues,
    confirmPopUp,
    loadingApply,
    decision,
    updateState 
  } = opts; //then do stuff

When i try to call it, i call it like:

onConfirm={async () =>
                HandleConfirmApplication({ 
                  opts.isInvite: true,
                  opts.confirmationCheckValues: this.props.confirmationCheckValues,
                  opts.confirmPopUp: this.props.onToggleConfirmPopUp,
                  opts.loadingApply: this.props.onToggleLoadingApply,
                  opts.decision: this.handleShiftInviteDecision('ACCEPT'),
                  opts.updateState: null

                })
              }

if i remove the object and just call them normally, it works, however when i tried to update the object so i can make the function params as an object it throws an error on each row saying Unexpected token ',' expected ','

Answer 1

Having a . in a property name isn't valid in JavaScript:

 console.log({ opts.isInvite: 'example' }) 

You should just pass the parameters themselves:

 HandleConfirmApplication({ isInvite: ..., // ... rest of params }) 

---

Note, technically you can have a . in a property name if you wrap it in quotes but that would give you an incorrect behavior in your particular code because you don't have any properties declared with that format.

 console.log({ 'opts.isInvite': 'this is fine' })