How to pass Functions as Props in React TypeScript

avatar

Borislav Hadzhiev

Thu Apr 21 20222 min read

Pass Functions as Props in React TypeScript #

To pass a function as props in React TypeScript:

  1. Define a type for the function property in the component's interface.
  2. Define the function in the parent component.
  3. Pass the function as a prop to the child component.
App.tsx
interface ButtonProps { sum: (a: number, b: number) => number; logMessage: (message: string) => void; // 👇️ turn off type checking doSomething: (params: any) => any; } function Container({sum, logMessage, doSomething}: ButtonProps) { console.log(sum(10, 15)); logMessage('hello world'); doSomething('abc'); return <div>Hello world</div>; } const App = () => { const sum = (a: number, b: number) => { return a + b; }; const logMessage = (message: string) => { console.log(message); }; return ( <div> <Container sum={sum} logMessage={logMessage} doSomething={logMessage} /> </div> ); }; export default App;

The example shows how to pass functions as props to a React component using TypeScript.

The sum function takes 2 parameters of type number and returns a number.

The logMessage function takes a string parameter and doesn't return anything.

And the doSomething function is used to show how you can turn off type checking if you don't want to type a function when passing it as props.

The any type effectively turns off type checking, so the function can be passed parameters of any type and may return a value of any type.

This syntax would also work if using a type alias instead of an interface.

App.tsx
type ButtonProps = { sum: (a: number, b: number) => number; logMessage: (message: string) => void; // 👇️ turn of type checking doSomething: (params: any) => any; };
It's very important that the type of the actual function matches the type we specified in ButtonProps.

If there is a mismatch, we would get a type checking error.

A common thing you might have to do is pass event handler function as props.

App.tsx
type ButtonProps = { handleClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void; }; function Container({handleClick}: ButtonProps) { return <div onClick={handleClick}>Hello world</div>; } const App = () => { const handleClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => { console.log('element clicked'); }; return ( <div> <Container handleClick={handleClick} /> </div> ); }; export default App;

The only thing that looks different between this code snippet and the previous ones is the type of the event object.

The type is different depending on the element and the event (e.g. onChange, onClick, etc).

You can figure out what the type of an event is by writing the handler function inline and hovering over the event parameter in your IDE.

App.tsx
interface ButtonProps { handleClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void; } function Container({handleClick}: ButtonProps) { // 👇️ wrote event handler inline return <div onClick={event => console.log(event)}>Hello world</div>; }

react get type of event

We wrote the event handler function inline and hovered over the event parameter to get its type.

Another good way to figure out the type of a prop is to right click on it and click "Go to Definition" in your IDE.

style prop cssproperties

The example above shows how we can right click on the style prop of an element and figure out that its type is CSSProperties or undefined.

Use the search field on my Home Page to filter through my more than 1,000 articles.