Share onclick function to button components React JS

Question

I need to make a generic button in which I pass certain properties as a parameter. one of those properties is the function that must be executed at the time of clicking event.

function Boton(props: { name: React.ReactNode , funcion: React.ReactNode }) {
  return (<div className="center-div"><IonButton shape="round" onClick={props.funcion}> {props.name}</IonButton></div>);
}

But what I got is:

JSX attribute) onClick?: ((event: React.MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) | undefined Type ‘ReactNode’ is not assignable to type ‘((event: MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) | undefined’. Type ‘null’ is not assignable to type ‘((event: MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) | undefined’.ts(2322) index.d.ts(1455, 9): The expected type comes from property ‘onClick’ which is declared here on type 'IntrinsicAttributes & Pick<IonButton, “color” | “strong” | “disabled” | “size” | “fill” | “mode”

But I do not want a Mouse event because it is going to be a mobile app.

Ignacio Monzalvo · Accepted Answer · 2020-09-25 22:49:29Z

1

It seems like you are giving React.ReactNode type to your function parameter. You should give it a function type.

Maybe something like this: () => void

Also, I guess your name parameter should be a String

answered Sep 25, 2020 at 22:49

Ignacio Monzalvo

111 bronze badge

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

Comments

Sarun UK · Accepted Answer · 2020-09-26 07:28:29Z

1

The 'function' props to the generic button shouldn't be React.ReactNode.

Iam using arrow function here,

const Button = (props: { name: React.ReactNode, onClick: Function}) => 
   (<div className="center-div">
     <IonButton shape="round" onClick={props.onClick}> 
      {props.name}
    </IonButton>
 </div>);

And where ever you are defining your generic button, define the name and onClick props.

Hope the above code will solve your issue.

answered Sep 26, 2020 at 7:28

Sarun UK

6,7667 gold badges26 silver badges51 bronze badges

1 Comment

Julián Oviedo Over a year ago

Thanks. this is what I got: (JSX attribute) onClick?: ((event: React.MouseEvent<HTMLIonButtonElement, MouseEvent>) => void) | undefined Type 'Function' is not assignable to type '(event: MouseEvent<HTMLIonButtonElement, MouseEvent>) => void'.ts(2322)

Collectives™ on Stack Overflow

Share onclick function to button components React JS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related