Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Calling function inside react component fails

I am trying to compute some value in getBankAccountFixedPrefix function in my react component.. This is called in fixedValue={this.getBankAccountFixedPrefix()} of AUITextInputPartialEdit tag below…. i am getting the below error… I am trying to understand the mistake.. i need some directions here..

ERROR in ./app/fields/BankAccountNumber/index.tsx 55:51
Module parse failed: Unexpected token (55:51)
File was processed with these loaders:
 * ./node_modules/awesome-typescript-loader/dist/entry.js
You may need an additional loader to handle the result of these loaders.
|         return bankAccountFixedPrefix;
|     };
>     BankAccountNumber.prototype.return = function (, div) { };
|     return BankAccountNumber;
| }(React.Component));
 @ ./app/components/Forms/AccountDetailsForm/index.tsx 19:26-70
 @ ./app/components/ContactAndAccountDetailsPage/index.tsx
 @ ./app/components/ApplicationForms/index.tsx
 @ ./app/components/Application/index.tsx
 @ ./app/index.tsx
class BankAccountNumber extends React.Component<IProps> {
  public render() {
    console.log("this.props inside BankAccountNumber: " + JSON.stringify(this.props));
    const translatedStrings = {
      bankAccountGuidanceLabel: stringIDs.bankAccountGuidanceLabel,
      deBankAccountPlaceholder: stringIDs.deBankAccountPlaceholder,
      bankAccountLabelAlternate: stringIDs.bankAccountLabelAlternate,
    };

    public getBankAccountFixedPrefix() {
      let bankAccountFixedPrefix = ApplicationConstants.deBankAccountFixedPrefix;
      if(this.props.launchAustria === true && this.props.countryOfResidence === "Austria") {
        bankAccountFixedPrefix = ApplicationConstants.atBankAccountFixedPrefix;
      }
      console.log("bankAccountFixedPrefix: " + bankAccountFixedPrefix);
      return bankAccountFixedPrefix;
    }

    return (
      <div>
        <Section spacing="medium">
          <FormLabel>{translatedStrings.bankAccountLabelAlternate} {this.props.firstName} {this.props.lastName}</FormLabel>
          <AUITextInputPartialEdit
            id={FieldId.bankAccount}
            spacing="micro"
            gridUnits={12}
            name={FieldId.bankAccount}
            formId={this.props.formId}
            placeholder={translatedStrings.deBankAccountPlaceholder}
            fixedValue={this.getBankAccountFixedPrefix()}
            status={this.props.errorMessage ? 'error' : 'unspecified'}
            textInputType="tel"
          />
          <Text textColor="tertiary" textSize="mini">
            {translatedStrings.bankAccountGuidanceLabel}
          </Text>
          <LineBreak />
          <ErrorMessageComponent errorMessage={this.props.errorMessage} />
        </Section>
      </div>
    );
  }
}

export default connector(BankAccountNumber);

>Solution :

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

The definition of method public getBankAccountFixedPrefix is misplaced. It is defined within the body of the render method, but should be placed outside of it, so it is a sibling of render.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading