Add onclick listener reactjs

Question

I want to add callback function when I click to button.

My code:

export enum PAYMENT_METHOD {
  online,
  offline,
}

interface Props {
  paymentMethod: PAYMENT_METHOD;
  togglePaymentMethod: (paymentMethod: PAYMENT_METHOD) => void;
}

const AmountToPayModal = (props: Props) => (
  <Container>
    <SectionLabel>
  2.&nbsp;
  <FormattedMessage id="SE-206.Section2.Title" />
</SectionLabel>
<PaymentBox>
      <PaymentButtonDeselected >
        <FormattedMessage id="SE-206.Section2.OnlinePayment" />
      </PaymentButtonDeselected>
      <PaymentButtonSelected onClick={props.togglePaymentMethod(PAYMENT_METHOD.online)}>
        <FormattedMessage id="SE-206.Section2.OfflinePayment" />
      </PaymentButtonSelected>
    </div>
</PaymentBox>
</Container>
    );

[ts] Type '{ onClick: void; children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes, any>>'. Types of property 'onClick' are incompatible. Type 'void' is not assignable to type 'EventHandler> | undefined'.

I am using TypeScript.

Oscar Paz · Accepted Answer · 2018-03-21 08:31:20Z

1

In your onClick handler you're not passing a function, but the call to a function. Your function will be called when the AmountToPayModal is called (during render), not when the user makes a click. And that function returns void, so TypeScript infers (correctly) that you're assigning void to an event handler.

I think that what you really want to to do is this:

<PaymentButtonSelected onClick={() => props.togglePaymentMethod(PAYMENT_METHOD.online)}>

Now you're assigning a function to the handler, and when the user clicks the element, your function will be called correctly

answered Mar 21, 2018 at 8:31

Oscar Paz

18.3k3 gold badges30 silver badges43 bronze badges

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

2 Comments

Twitter khuong291 Over a year ago

Thanks @Oscar Paz

Alexey Sh. Over a year ago

Lambdas are forbidden in JSX attributes due to their rendering performance impact

Collectives™ on Stack Overflow

Add onclick listener reactjs

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related