how do I pass parameters to the function on onClick? (Error: 'void' is not assignable to type )

Question

Error Message:

Type 'void' is not assignable to type '((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined'.ts(2322) index.d.ts(1443, 9): The expected type comes from property 'onClick' which is declared here on type 'DetailedHTMLProps<ButtonHTMLAttributes, HTMLButtonElement>'

Question: Why am I forced to use mouseEvent to onClick? And how do I pass parameters to the function on onClick?

groups.map((group) => {
  group.fields.map((field) => {
   ...
    <button
       ///****ERROR MESSAGE HERE****///
       onClick={this.handleClickOption(group.index, 'g', field.label)}
       type="button"
       className={styles.emptyButton}
    >

Here is my handleClickOption call

  handleClickOption(connectorName: string, stepIndex: string | number, label: string): void {
    const { onChange } = this.props;
    onChange(`${connectorName}.${stepIndex}.${label})]`);
  }

codemax codemax · Accepted Answer · 2020-08-07T03:43:20

You should not be invoking the handleClickOption() func immediately. Instead, you can pass in an anonymous function.

groups.map((group) => {
  group.fields.map((field) => {
   ...
    <button
       ///****ERROR MESSAGE HERE****///
       onClick={() => this.handleClickOption(group.index, 'g', field.label)}
       type="button"
       className={styles.emptyButton}
    >

And there is a problem with the signature of handleClickOption(). You might need to remove the void return type.

how do I pass parameters to the function on onClick? (Error: 'void' is not assignable to type )

1 Answers