How to pass a function as an argument to a ReactJS component in TypeScript

Question

I am trying to make a reusable ReactJS button component and need help on how to pass a function to a component and then use it as a click event. The click event on the button is not working.

Here is the code that will call the component:

export var MyPublicFunction = function (inArg: number) {     alert(inArg); }  ReactDOM.render(<MyButton name="My Button" clickFunction={MyPublicFunction(1)} >Button</MyButton>, document.getElementById('content')); 

Here it the component I'm trying to write:

interface myProps {    name: string;    clickFunction: any }  class MyButton extends React.Component<myProps, {}> {      constructor(props: myProps) {         super(props);     }      render() {         return (<div>             <button ref="btn1"  onClick={this.props.clickFunction} >                 {this.props.name}              </button>         </div>);     } //end render. } //end class. 

Answer 1

<MyButton name="My Button" clickFunction={MyPublicFunction(1)} > 

The expression MyPublicFunction(1) is immediately invoked during evaluating of the containing expression. What you want is to provide a function to clickFunction:

<MyButton name="My Button" clickFunction={() => MyPublicFunction(1)} > 

Note that you would get a type error if you had written something like this:

interface myProps {    name: string;    clickFunction: () => void; }