Calling function inside react component fails

Question

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);

@jonrsharpe i dint get you, which method is named with return ? — stallion
– stallion, Commented Dec 28, 2021 at 11:17

trincot · Accepted Answer · 2021-12-28 11:18:09Z

2

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.

answered Dec 28, 2021 at 11:18

trincot

357k38 gold badges282 silver badges338 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Calling function inside react component fails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related