CODEWITHSUNDEEP
reactjsreact-native
J.Doo
J.Doo

Reputation: 57

Undefined function when importing it from different file?

So, I have this component

<ConfirmApplicationPopUp
  onConfirm={() => handleConfirmApplication(true)}
/>

whenever i try to run the function[it's passed to the props of ConfirmApplicationPopUp component as you can see] it tells me that it's undefined my function is in another file I import it like this import handleConfirmApplication from '../shift-details/utils'; the function itself is

export const handleConfirmApplication = async (isInvite) => {
  const checkVals =
    get(`shift${isInvite ? 'Invite' : ''}.account.accountName`, this.props) === ONBOARDING_ACCOUNT
        ? omit('payRate', this.props.confirmationCheckValues)
        : this.props.confirmationCheckValues;
    if (Object.values(checkVals).every(val => val)) {
        this.props.onToggleConfirmPopUp();
        this.props.onToggleLoadingApply();
        try {
            if(isInvite) {
              await this.handleShiftInviteDecision('ACCEPT')();
            }
            else {
              const shiftId = this.props.shift.id;
              const {
                  data: { updatedShifts },
              } = await this.props.updateMyApplication(shiftId, 'APPLY');
                this.setState({
                  updatedShift: updatedShifts.find(({ id }) => id === shiftId),
                });
            }
        } catch (e) {
            Alert.alert('Error', parseError(e));
        } finally {
            this.props.onToggleLoadingApply();
        }
    } else {
          Alert.alert('Error', 'Please confirm all shift requirements');
    }
}

Any ideeas why that happens? I have checked some of the other topics about this but with no avail :(

Upvotes: 0

Views: 28

Answers (1)

Andrew
Andrew

Reputation: 28539

It's because you are not exporting the function as default.

If you import it in the following way it should work.

import { handleConfirmApplication } from '../shift-details/utils';

Upvotes: 2

Related Questions